利用jquery实现两种轮播效果
轮播一:
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
var timer = setInterval(change,2000); //定时器,每2s轮播一次
var imgs=$("#slide li"); //图片的数组
var length=imgs.length; //图片数组的长度
var index=0; //图片索引
var icons=$("#icons li");
var arrows=$("[name='arrow']"); //左右指向标
var box=$("#box");
imgs.hide();
imgs.eq(index).show(); //只显示第一张图片
icons.eq(index).addClass("active"); //激活当前图标
//对数字标签添加事件
icons.click(function(){
index = $(this).index(); //获得索引
update();
clearInterval(timer);
timer=setInterval(change,2000); //重启定时器
});
imgs.mouseover(function(){
clearInterval(timer);
}).mouseout(function(){
timer=setInterval(change,2000);
});
box.mouseenter(function(){
arrows.show();
}).mouseleave(function(){
arrows.hide();
});
arrows.click(function(){
if($(this).attr("id")=="left"){
index--;
}else{
index++;
}
if(index<0){
index=length-1;
}
if(index>length-1){
index=0;
}
update();
clearInterval(timer);
timer=setInterval(change,2000);
});
function change(){
index++;
if(index==length)
index=0;
update();
}
function update(){
imgs.fadeOut(500);
imgs.eq(index).fadeIn(500);
icons.removeClass("active");
icons.eq(index).addClass("active");
}
});
</script>
轮播二:
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
var timer = setInterval(changeRight,2000);
var index=0;
var box=$("#box");
var icons=$("#icons li");
var imgs=$("#slide li");
var len=imgs.length;
var arrows=$("[name='arrow']");
icons.eq(index).addClass("active"); //激活当前图
icons.click(function(){
index = $(this).index()+1; //获得索引
clearInterval(timer);
changeLeft(); //重启定时器
});
box.mouseenter(function(){
arrows.show();
}).mouseleave(function(){
arrows.hide();
});
imgs.mouseover(function(){
clearInterval(timer);
}).mouseout(function(){
timer=setInterval(changeRight,2000);
});
arrows.click(function(){
clearInterval(timer);
if($(this).attr("id")=="left"){
changeLeft();
}else{
changeRight();
}
});
function changeLeft(){
if(index==0){
$("#slide").css("left",-2500);
index=length-1;
icons.eq(index).addClass("active");
}else{
index--;
}
$("#slide").animate({"left":-500*index},500);
icons.removeClass("active");
icons.eq(index).addClass("active");
}
function changeRight(){
if(index==length){
$("#slide").css("left",0);
index=1;
icons.eq(index).addClass("active");
}else{
index++;
}
$("#slide").animate({"left":-500*index},500);
icons.removeClass("active");
if(index==length)
icons.eq(0).addClass("active");
else
icons.eq(index).addClass("active");
}
});
</script>