jQuery无缝轮播图代码

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

html 代码

<div class="banner">
 <ul class="img">
  <li><a href="#"><img src="image/1.jpg"></a></li>
  <li><a href="#"><img src="image/2.jpg"></a></li>
  <li><a href="#"><img src="image/3.jpg"></a></li>
  <li><a href="#"><img src="image/4.jpg"></a></li>
 </ul>

 <ul class="num">
 </ul>
 <div class="btn btn_l">&lt;</div>
 <div class="btn btn_r">&gt;</div>
</div>

jq代码

$(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<size-1;j++){
  $(".banner .num").append("<li></li>");
 }
 $(".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 样式

<style>
*{padding:0;margin:0;list-style: none;}
.banner{
 margin:100px auto; 
 border:5px solid #000; 
 width:1000px;
 height:640px;
 position: relative;
 overflow: hidden;
}
.banner .img{
 width:5000px;
 position: absolute;
 left:0px;
 top:0px;

}
.banner .img li{
 float:left;
}
.banner .num{
 position:absolute;
 width:100%;
 bottom:20px;
 left:0px;
 text-align: center;
 font-size: 0px;
}
.banner .num li{
 width:10px;
 height:10px;
 background: #888;
 border-radius: 50%;
 display: inline-block;
 margin:0 3px;
 cursor: pointer;

}
.banner .num li.on{
 background: #f00;
}
.banner .btn{
 width:30px;
 height:50px;
 background: rgba(0,0,0,0.5);
 position:absolute;
 top:50%;
 margin-top:-25px;
 cursor: pointer;
 text-align: center;
 line-height: 50px;
 color:#fff;
 font-size: 40px;
 font-family: "宋体";
 display: none;
}
.banner:hover .btn{
 display: block;
}
.banner .btn_l{
 left:0px;
}
.banner .btn_r{
 right:0px;
}
</style>

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

# jQuery轮播图代码 # jQuery无缝轮播图 # jQuery轮播图片 # jquery实现左右无缝轮播图 # jQuery插件slides实现无缝轮播图特效 # jquery实现左右滑动式轮播图 # 基于jQuery实现淡入淡出效果轮播图 # jQuery实现一个简单的轮播图 # jquery实现左右轮播图效果 # 原生Javascript和jQuery做轮播图简单例子 # jQuery实现轮播图源码 # jQuery实现简洁的轮播图效果实例 # jquery实现简单自动轮播图效果 # 鼠标 # 大家分享 # 具体内容 # 大家多多 # 宋体 # 圆点 # var # function # clone # append # size # js # btn_l # btn # num # jq # btn_r # amp # left # setInterval

返回目录在线咨询

上一篇：PythonRESTful API项目教程_FastAPIFlask完整流程解析
下一篇：如何使用Golang处理时间解析错误_Golangtime.Parse异常捕获与处理

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jQuery无缝轮播图代码

您的项目需求