图片轮播简单版

简单版的图片轮播

body部分

<style type="text/css">
.ani-span{
position: absolute;
}
.title{
position: absolute;
cursor: pointer;
left: 83px;
display: inline-block;
top: 200px
}
</style>
<div style="position: relative;">	
       <div class="ani">
       		<span class="ani-span"><img alt="" src="${webRoot}/images/equip/online/jdxx3.png" ></span>
       		<span class="ani-span"><img alt="" src="${webRoot}/images/equip/online/jyfs2.png" ></span>
       		<span class="ani-span"><img alt="" src="${webRoot}/images/equip/online/rztj2.png" ></span>
       		<span class="ani-span"><img alt="" src="${webRoot}/images/equip/online/sxfk4.png" ></span>     		
       </div>
       <div class="title">
       		<span >0</span>
       		<span >1</span>
       		<span >2</span>
       		<span >3</span>
       </div>
    </div>

脚本控制部分

var index=0;//下标
var timefun;//定时器
//自动播放事件
var time=function qq(){	
	changeStyle(index);
	index=index+1;
	if(index>3){
		index=0;
	}
}
//悬浮事件
$(".title >span").hover(function (){
	//清除定时器
	window.clearInterval(timefun);
	index=$(".title").find(this).index();
	changeStyle(index);
	index=index+1;
	if(index>3){
		index=0;
	}	
},function(){//取消悬浮事件
	//重新启动定时器
	timefun=setInterval(time,2000);
});
//定时器
timefun=setInterval(time,2000);
//根据下标进行操作
function changeStyle(index){
	$('.ani').find('span').eq(index).show().siblings().hide();
	$('.title').find('span').eq(index).css({"color":"red"}).siblings().css({"color":"black"});
}

运行结果

大致思路就是这个样子

1. 首先把样式调整好，有几个图片就有几个悬浮按钮；
2. 声明一个全局变量作为自动轮播事件和悬浮事件的参数
3. 通过声明的全局下标，我们可以根据当前下标对当前对应的元素做操作，加上sublings()这个方法我们可以对当前下标之外的元素做操作(changeStyle()函数)；
4. 每次触发悬浮事件后要清除定时器，悬浮事件结束后在重新启用定时器
5. 注意：不管是定时器函数还是悬浮事件函数都要对全局下标做判断，每次对这个全局下标做完操作后都要检查这个下标是否越界，然后再进行处理