<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SteTimeout</title>
<meta name="author" content="Administrator" />
<!-- Date: 2014-07-01 -->
<style type="text/css">
*{margin:0;padding:0;}
.img{width:1002px;height:500px;border:0;}
.container{margin:0 auto;padding:0;width:1002px;height:500px;}
.content01{margin:100px auto;width:1002px;height:500px;background:pink;}
.content02{width:1002px;height:30px;position:absolute;top:570px;background:#A7C942;}
.ul{margin:0;padding:0;}
.ul li{width:167px;height:30px;float:left;list-style:none;text-align:center;line-height:30px;}
</style>
<script type="text/javascript">
var a=0;//全局变量
var arr=new Array(6);//创建数组对象，且设置长度
var run=true;//根据run的值来控制是否启动显示效果
for(var i=0;i<arr.length;i++){//遍历数组
arr[i]="images/"+i+".jpg";
}
window.onload=start;//页面加载完成后，执行开始方法
function stop(){//结束滚动
run=false;
clearInterval(t);//结束，清楚由t引发的setInterval方法
}
function start(){//开始滚动
run=true;
t=setInterval(changeBox,1000);//使用setInterval方法，每一秒钟执行一次changeBox.
}
function liBox(){//下面滑块的动态显示，
for(var i=0;i<arr.length;i++){
if(i!=a){//如果不等于，那么背景为空；反之，则有背景
document.getElementById("li"+i).style.background="";
}else{document.getElementById("li"+a).style.background="#EAF2D3";}
}
}
function changeBox(){
if(run){//如果run==true,那么运行下面代码
var b=document.getElementById("images");
if(a>arr.length-1){
a=0;
b.src=arr[a];
liBox();
a++;
}else{
b.src=arr[a];
liBox();
a++;
}
}
}
function now(n){//当鼠标在滑块上时调用的党法
a=n;
liBox();
document.getElementById("images").src=arr[a];
}
</script>
</head>
<body>
<div class="container" onMouseMove="stop()" onMouseOut="start()">
<div class="content01"><img class="img" id="images" src="images/0.jpg" /></div>
<div class="content02">
<ul class="ul">
<li id="li0" onmousemove="now(0)" style="background:#EAF2D3;">A</li>
<li id="li1" onmousemove="now(1)">B</li>
<li id="li2" onmousemove="now(2)">C</li>
<li id="li3" onmousemove="now(3)">D</li>
<li id="li4" onmousemove="now(4)">E</li>
<li id="li5" onmousemove="now(5)">F</li>
</ul>
</div>
</div>
</body>
</html>
js实现图片轮番效果，原生代码
4星 · 超过85%的资源 需积分: 50 4 浏览量
2014-07-04
17:25:27
上传
评论 2
收藏 3.29MB RAR 举报 
0701.rar （7个子文件） 
0701 images 
2.jpg 642KB 1.jpg 752KB 3.jpg 595KB 5.jpg 95KB 4.jpg 611KB 0.jpg 835KB
SteInterval.html 3KB资源评论
zhou_li_062014-12-18不错，有参考价值。谢谢分享哈
qq_325992512017-09-20不错，还可以，谢谢分享啊- qq_283282952015-08-05东西不错，值得一看
- csdn_lsm2016-04-12学习了，谢谢
