您的位置：首页 > Web前端 > JavaScript

js实现图片轮番效果，原生代码

2014-07-04 17:17 1066 查看

我们在浏览网页的时候，会经常看到网页上有图片轮番效果，虽然网上有很多优秀的特效代码，但是作为菜鸟的我，依旧决定写一个自己的照片轮番，只为给自己增加一点点安全感。

分析下，思想很简单。图片轮番：（需要用到的方法）

1：隔一段时间自动循环展示图片。||{setInterval(),}

2：当鼠标进入到图层区域时，图片停止轮番。||{clearInterval(),}

3：当鼠标移动到信息栏目时出现相对于的图片||}

这是一个菜鸟的代码，希望您能对我的代码提出宝贵意见！！

其中遇到的问题：为什么使用setTimeOut()会出现图片轮番时速度很快？

<!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>

最后一句：人在塔在！

源码下载：http://download.csdn.net/detail/u014703834/7593463

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航