一步一步写图片切换
做项目时经常要用到图片切换：通常是通过标签改变位置来显示不同的图片或者改变图片的透明度来切换。
图片切换要做的一些操作：（1）鼠标over到或者click到数字按钮分别显示相对应的图片（当然如果图片自动播放时你首先要清楚动画）
（2）自动播放（这里要注意的是当鼠标对数字按钮进行操作时你要记录当前的索引值，让图片从当前的索引开始播放，而不是从0开始）
（3）鼠标移开时继续播放
好开始一步一步写这个效果首先准备基本的html结构如下：
<div id="play">
<div class="packet">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li><img src="imgs/show_bg.jpg" width="992" height="215"/></li>
<li><img src="imgs/show_bg2.jpg" width="992" height="215"/></li>
<li><img src="imgs/show_bg3.jpg" width="992" height="215"/></li>
<li><img src="imgs/show_bg4.jpg" width="992" height="215"/></li>
</ul>
</div>
</div>
然后css修饰一下：
<style type="text/css">
* { padding: 0; margin: 0;}
li { list-style: none;}
img { border: none; float:left;}
body { background: #ecfaff;}
#play { width: 992px; height: 215px; overflow: hidden; border: 1px solid #d8d8d8; margin: 100px auto 0;}
.packet { width:992px; height: 215px; position: relative; overflow:hidden;}
ol { position: absolute; right: 5px; bottom: 0px; z-index: 2;}
ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px;}
.active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px;}
ul{ position: absolute; top: 0; left: 0; z-index: 1; background:white;}
</style>
开始做主要的部分:
首先获取各个元素
var _play=document.getElementById("play");
var _ol=_play.getElementsByTagName("ol")[0];
var _ul=_play.getElementsByTagName("ul")[0];
var _uLi=_ul.getElementsByTagName("li");
var _oLi=_ol.getElementsByTagName("li");
当鼠标放到数字按钮时显示对应的图片这里就要获取索引
(function(i){
_oLi[i].onmouseover=function(){
_ul.style.top=-i*215+"px";
for(var j=0;j<_oLi.length;j++){
_oLi[j].className="";
}
_oLi[i].className="active";
}
})(i)
这里就可以完成基本的效果
接着是作自动播放的效果：这里就要用到setInterval函数，每隔一段时间触发当前显示的下一个的mouseover事件就可以形成自动播放按照思路写了这样的代码出来
setInterval(autoScroll,2000);
function autoScroll(){
nextIndex++;
if(nextIndex>3){nextIndex=0;}
_oLi[nextIndex].onmouseover();
}
当然在前面需要初始化nextIndex=0，到这里感觉还是正常的（鼠标不动就呆呆的看着），但是当鼠标移到数字按钮后这个自动播放就乱跳了，这说明刚才取索引是不正确的，当鼠标移到某个数字按钮时要记录此时对应的索引值，在这基础上进行自动播放，这里的难点就是如何保存这个索引值呢？？？这里的解决方法是定义一个对象初始化为第一个数字按钮如var cur=_oLi[0];再闭包里面给对象添加一个属性index用来记录i值如_oLi[i].index=i;当点击鼠标按钮的时候把该对象复制给cur如cur=this;这样cur也就具有了index属性这样就可以访问到这个索引值（cur是全局的）代码如下
setInterval(autoScroll,2000);
function autoScroll(){
var nextIndex=cur.index+1;
if(nextIndex>3){nextIndex=0;}
_oLi[nextIndex].onmouseover();
}
这里还有几个问题就是当鼠标移到数字按钮时图片仍在变这就需要在mouseover事件中清楚动画，在mouseover事件中清楚动画后你在离开后停止动画了这就需要再自动播放重启动画完整代码如下
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片切换</title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; float:left;}
body { background: #ecfaff; }
#play { width: 992px; height: 215px; overflow: hidden; border: 1px solid #d8d8d8; margin: 100px auto 0; }
.packet { width:992px; height: 215px; position: relative; overflow:hidden;}
ol { position: absolute; right: 5px; bottom: 0px; z-index: 2; }
ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }
.active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }
ul{ position: absolute; top: 0; left: 0; z-index: 1; background:white;}
</style>
<script type="text/javascript">
window.onload=function(){
var _play=document.getElementById("play");
var _ol=_play.getElementsByTagName("ol")[0];
var _ul=_play.getElementsByTagName("ul")[0];
var _uLi=_ul.getElementsByTagName("li");
var _oLi=_ol.getElementsByTagName("li");
var cur=_oLi[0];
var t=null;
for(var i=0;i<_oLi.length;i++){
(function(i){
_oLi[i].index=i;
_oLi[i].onmouseover=function(){
clearInterval(t);
cur=this;
_ul.style.top=-i*215+"px";
for(var j=0;j<_oLi.length;j++){
_oLi[j].className="";
}
_oLi[i].className="active";
}
_oLi[i].onmouseout=function(){
t=setInterval(autoScroll,2000);
}
})(i)
}
t=setInterval(autoScroll,2000);
function autoScroll(){
var nextIndex=cur.index+1;
if(nextIndex>3){nextIndex=0;}
_oLi[nextIndex].onmouseover();
t=setInterval(autoScroll,2000);
}
}
</script>
</head>
<body>
<div id="play">
<div class="packet">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<ul>
<li><img src="imgs/show_bg.jpg" width="992" height="215" /></li>
<li><img src="imgs/show_bg2.jpg" width="992" height="215" /></li>
<li><img src="imgs/show_bg3.jpg" width="992" height="215" /></li>
<li><img src="imgs/show_bg4.jpg" width="992" height="215" /></li>
</ul>
</div>
</div>
</body>
</html>
当然图片切换时是没有动画效果的
