jQuery无缝轮播图代码

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

html 代码

rush:xhtml;">

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;">

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

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...