},function(){
//滑出则重置定时器
autoChangeAgain();
});
//右箭头点击处理
$("#next").click(function(){
curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
changeTo(curIndex);
});
其中autoChangeAgain()就是一个重置定时器函数
//清除定时器时候的重置定时器--封装
function autoChangeAgain(){
autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//调用变换处理函数
changeTo(curIndex);
},2500);
}
其中changeTo()就是一个图片切换的处理函数
function changeTo(num){
var goLeft = num * 400;
$(".imgList").animate({left: "-" + goLeft + "px"},500);
$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
}
每传入一个图片序号，则按理进行goLeft
4.为右下角的那几个li 按钮绑定事件处理
//对右下角按钮index进行事件绑定处理等
$(".indexList").find("li").each(function(item){
$(this).hover(function(){
clearInterval(autoChange);
changeTo(item);
curIndex = item;
},function(){
autoChangeAgain();
});
});
jq就是这样，简便，原生代码量就有些多了
完整代码
<!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>图片轮播 jq(左右切换)</title>
<style type="text/css">
body,div,ul,li,a,img{margin: 0;padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;}
#wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
#banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
.imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
.imgList li{float:left;display: inline;}
#prev,
#next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
#prev{left: 10px;}
#next{right: 10px;}
#prev:hover,
#next:hover{opacity: 0.5;filter:alpha(opacity=50);}
.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
