<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
body{margin:50px auto;padding:0;border:0; background-color:#ccffcc;}
#main{width:450px;height:400px;margin:auto}
#head{height:400px;background-color:#ccc}
#head img{width:450px;height:400px;padding-left:5px;padding-right:5px}
#cont li{float:left;list-style:none;width:35px;height:30px;text-align:center;line-height:30px;margin-right:20px;border:1px solid orange}
#cont ul{width:360px;margin:auto;margin-top:5px background-color:#ccc}
</style>
<script>
//先定义一个计数器,统计图片
var count = 1;
//周期函数的返回值
var interval = '';
function changePic(){
var myimg = document.getElementById("show");
if(count == 6){
count = 0;
}
var k = ++count;
myimg.src = "images/0"+k+".jpg";
//图片修改后,序号背景色也要发生变化
//先将所有的序号颜色恢复
for(var i=1;i<=6;i++){
document.getElementById("num"+i).style.backgroundColor = '';
}
//将当前序号设置背景色
document.getElementById("num"+k).style.backgroundColor = "yellow";
}
//间歇性函数实现图片周期变换
function start_chan(){
interval = setInterval("changePic()",1000);
}
//停止周期函数
function stop_chan(){
clearInterval(interval);
}
function choosePic(n){
stop_chan();
document.getElementById("show").src = "images/0"+n+".jpg";
for(var i=1;i<=8;i++){
document.getElementById("num"+i).style.backgroundColor = '';
}
document.getElementById("num"+n).style.backgroundColor = "yellow";
count = n;
}
</script>
</head>
<body onLoad="start_chan()">
<div id="main">
<div id="head">
<img id="show" src="images/01.jpg" onMouseOver="stop_chan()" onMouseOut="start_chan()"/>
</div>
<div id="cont">
<ul>
<li id="num1" onMouseOver="choosePic(1)" onMouseOut="start_chan()">1</li>
<li id="num2" onMouseOver="choosePic(2)" onMouseOut="start_chan()">2</li>
<li id="num3" onMouseOver="choosePic(3)" onMouseOut="start_chan()">3</li>
<li id="num4" onMouseOver="choosePic(4)" onMouseOut="start_chan()">4</li>
<li id="num5" onMouseOver="choosePic(5)" onMouseOut="start_chan()">5</li>
<li id="num6" onMouseOver="choosePic(6)" onMouseOut="start_chan()">6</li>
</ul>
</div>
</div>
</body>
</html>
分享到:
相关推荐
图片切换广告,图片自动切换,图片切换广告,图片自动切换
自动切换图片自动切换图片自动切换图片自动切换图片自动切换图片自动切换图片自动切换图片自动切换图片自动切换图片自动切换图片
javascript图片自动切换效果 javascript图片自动切换效果
js图片自动切换
javascript 图片切换,自动切换,上下页转换。很实用,很适合网站使用。
1.手动切换可以实现点击上一张按钮调转到上一张,下一张按钮跳转到下一张 2.自动切换,可以根据网络连接在线自动切换图片
js图片之间切换html图片自动切换 js2图片 切换 图片 html图片 自动切换
js图片自动切换显示,可以实现网站美观大方的图片切换显示,纯js。。。。
基于android的一个图片自动切换器,自己写的,供参考。。。嘿嘿
js自动切换图片
ASP.NET FLASH自动切换,web FLASH自动切换,flash自动切换图片
这是用jquery实现的图片自动切换效果,包括用鼠标划过时图片切换,自动切换等效果的实现。
图片自动切换效果网页特效 图片自动切换效果网页特效 图片自动切换效果网页特效 图片自动切换效果网页特效
图片切换展示效果 jpg转换SWF js图片切换 flash图片切换效果 图片自动切换效果
自己写的图片自动切换。一种常见的网页效果。
用jquery制作图片切换效果,图片淡隐淡现带左右按钮和分页索引图片控制,鼠标点击按钮或图片显示大图,大图淡隐淡现切换播放,提高用户体验设计是jquery 图片切换中非常常用的jquery
图片自动切换
几张图片自动切换显示效果,可自定义图片数量和切换速度
js 实现图片自动切换 有几个实例很实用