jQuery无缝轮播图代码

本文实例为大家分享了jQuery无缝轮播图的具体代码，供大家参考，具体内容如下

html 代码

rush:xhtml;">

<ul class="num">

jq代码

rush:js;"> $(function(){ var i=0; var clone=$(".banner .img li").first().clone(); $(".banner .img").append(clone); var size = $(".banner .img li").size(); for(var j=0;j"); } $(".banner .num li").first().addClass('on'); //鼠标划入圆点 $(".banner .num li").hover(function(){ var index=$(this).index(); i=index; $(".banner .img").stop().animate({left:-index*1000},500); $(this).addClass('on').siblings().removeClass('on'); })

/自动轮播/
var t=setInterval(function(){
i++;
move();
},2000);

//对banner定时器的操作
$(".banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(move,2000);
})

/向左按钮/
$(".banner .btn_l").click(function(){
i++;
move();
})
/向右按钮/
$(".banner .btn_r").click(function(){
i--;
move();
})

function move(){
if(i==size){
$(".banner .img").css({left:0});
i=1;
}
if(i==-1){
$(".banner .img").css({left:-(size-1)*1000});
i=size-2;
}

$(".banner .img").stop().animate({left:-i*1000},500);

if(i==size-1){
$(".banner .num li").eq(0).addClass('on').siblings().removeClass('on');
}else{
$(".banner .num li").eq(i).addClass('on').siblings().removeClass('on');
}
}
})

style 样式

rush:css;">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文地址：https://www.jb51.cc/jquery/43268.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：jQuery实现两列等高并自适应高度下一篇：jQuery手指滑动轮播效果