jq轮播图(单页轮播和无缝轮播)

单页轮播

<div class="banner_view">								
	<ul class="banner_wrap">
	   <li><a href=""><img src="img/ad/1.jpg" alt="" /></a></li>
	   <li><a href=""><img src="img/ad/2.jpg" alt="" /></a></li>
	   <li><a href=""><img src="img/ad/3.jpg" alt="" /></a></li>
	</ul>
	<ul class="banner_num">
	    <li class="current"></li>
	    <li></li>
	    <li></li>
	</ul>
</div>

#content .content_banner {
  	float: left;
  	width: 590px;
  	height: 470px;
  	margin-right: 10px;
  	margin-top: 10px;
  }
  
  #content .content_banner .banner_view {
        position: relative;
        overflow:hidden;
  	width: 590px;
  	
  }
  
  #content .content_banner .banner_view .banner_wrap {
  	height: 470px;
  	width: 1770px;
  	position: relative;
  	left: 0;
  }
  
  #content .content_banner .banner_view .banner_wrap li {
  	float: left;
  }
  
  #content .content_banner .banner_view .banner_wrap li a {
  	display: block;
  	width: 590px;
  	height: 470px;
  }
  
  #content .content_banner .banner_view .banner_num {
  	position: absolute;
  	left: 46px;
  	bottom: 20px;
  }
  
  #content .content_banner .banner_view .banner_num li {
  	position: relative;
  	float: left;
  	width: 18px;
  	height: 18px;
  }
  
  #content .content_banner .banner_view .banner_num li:after {
  	position: absolute;
  	top: 6px;
  	left: 6px;
  	content: "";
  	width: 6px;
  	height: 6px;
  	border: 1px solid #b9beba;
  	border-radius: 50%;
  }
  
  #content .content_banner .banner_view .banner_num li.current:after {
  	background: red;
  }

此时的页面如下图所示

js部分：

**轮播图移动的是ul，不是单个li**

var imgLi=$(".banner_wrap li");
var numLi=$(".banner_num li");
var numNow=0;//图片数字计数器
var imgNow=0 //图片轮播计数器
var timer;

1.点击图片底部小点添加current样式

2.点击图片底部小点出现相对应的图片

numLi.click(function(){
  var index=$(this).index();
  numNow=index;
  imgNow=index;//这两步是为了防止点击后出现数字，图片不同步现象
  $(this).addClass("current").siblings().removeClass("current");
  $(".banner_wrap").animate({"left":-imgLi.eq(0).width()*index},1000)
})

3.实现自动轮播

function play(){	
    numNow++;				
    numLi.eq(numNow).addClass("current").siblings().removeClass("current");
    $(".banner_wrap").animate({"left":-imgLi.eq(0).width()*numNow})
}
timer=setInterval(play,3000)

这一步完成会发现当图片到最后一张会出现问题

4.当图片到最后一张的判断

function play(){	
   // imgNow++;	
    if(numNow==numLi.size()-1){						
	   numNow=0;
	}else{
	   numNow++;
	}				
    numLi.eq(numNow).addClass("current").siblings().removeClass("current");
    $(".banner_wrap").animate({"left":-imgLi.eq(0).width()*numNow})
}
timer=setInterval(play,3000)

此时当自动到最后一张时，会直接跳到第一张，体验度不好

5.完善第4步

当轮播到最后一张时，（numLi.size()-1），可以将img的第一个li相对定位到最后一张，即left等于整个ui的宽度；

当轮播到（imgNow==imgLi.size()），将img的第一个li的定位取消，并且将ul的left置为0

function play(){	
    imgNow++;	
    if(numNow==numLi.size()-1){						
	numNow=0;
        imgLi.eq(0).css({
		"position":"relative",
		"left":$(".banner_wrap").width()
	});
	}else{
	   numNow++;
	}				
    numLi.eq(numNow).addClass("current").siblings().removeClass("current");
    $(".banner_wrap").animate({"left":-imgLi.eq(0).width()*imgNow},1000,function(){
        if(imgNow==imgLi.size()){
	  imgNow=0;
	  imgLi.eq(0).css("position","static");
	  $(".banner_wrap").css("left",0)
	}
    })
}
timer=setInterval(play,3000)

6.当鼠标移入停止计时器，移出时计时器继续

imgLi.hover(					
  function(){
    clearInterval(timer)
  },
  function(){
    timer=setInterval(play,3000)
  }
)

完成，数字小点可以换成数字，缩略图等等。

无缝轮播

先上效果图

html代码：

<div class="scrollDiv">
  <a href="javascript:;" class="leftBtn"></a>
  <a href="javascript:;" class="rightBtn"></a>	
  <div class="srcollWrap">
    <ul>
	<li><img src="img/111.jpg" alt="" /></li>
	<li><img src="img/222.jpg" alt="" /></li>
	<li><img src="img/333.jpg" alt="" /></li>
	<li><img src="img/444.jpg" alt="" /></li>
	<li><img src="img/555.jpg" alt="" /></li>
    </ul>
  </div>
</div>

css代码：

.scrollDiv {
	width: 900px;
	margin: 0 auto;
	position: relative;
}

.scrollDiv a {
	position: absolute;
	display: block;
	height: 200px;
	width: 50px;
	background: #fff;
}

.scrollDiv a:after {
	position: absolute;
	left: 16px;
	top: 85px;
	content: "";
	width: 18px;
	height: 18px;
	border: 4px solid #666666;
	transform: rotate(45deg);
}

.scrollDiv a.leftBtn {
	left: 0;
}

.scrollDiv a.leftBtn:after {
	border-top: none;
	border-right: none;
}

.scrollDiv a.rightBtn {
	right: 0;
}

.scrollDiv a.rightBtn:after {
	border-left: none;
	border-bottom: none;
}

.scrollDiv .srcollWrap {
	position: relative;
	left: 50px;
	width: 800px;
	overflow: hidden;
}

.scrollDiv .srcollWrap ul {
	height: 200px;
	position: relative;
}

.scrollDiv .srcollWrap ul li {
	float: left;
	width: 200px;
}

js部分：

1.获取ul并且将ul内部的li复制一份

var oul=$(".srcollWrap ul");
oul.html(oul.html() + oul.html());

2.获取li，计算ul的宽度

var oli=$(".srcollWrap ul li");
oul.width(oli.eq(0).width()*oli.length);

3.无缝轮播在于修改ul的left值（默认向左滚动）

setInterval(()=>{
    oul.css("left","-=2px");//向左滚动
    //当left到ul宽度一半时，要将ul的left置为0
    if(oul.css("left")==-oul.width()/2+"px"){
        oul.css("left","0");
    }
},30)

4.向右滚动：

   将ul每次left改变的值变成正的，即oul.css("left","+=2px");

   当ul的left值为0时，要将ul的left值设为负的ul宽度一半

if(oul.css("left")==-oul.width()/2+"px"){
  oul.css("left","0");
}

整理代码，如下

var oul=$(".srcollWrap ul");			
oul.html(oul.html() + oul.html());
var oli=$(".srcollWrap ul li");
oul.width(oli.eq(0).width()*oli.length);
var speed=2;
var timerId;

function slide(){
  oul.css("left","+="+speed+"px");
  if(speed>0){
    if(oul.css("left")=="0px"){
	  oul.css("left",-oul.width()/2);
	 }
  }
  if(speed<0){
    if(oul.css("left")==-oul.width()/2+"px"){
	  oul.css("left","0");
	 }
    }
}
timerId=setInterval(slide,30)

$(".leftBtn").click(function(){
	speed=-2
})
$(".rightBtn").click(function(){
	speed=2
})

5.鼠标hover事件

oli.hover(
  function(){
	clearInterval(timerId)
  },
  function(){
	timerId=setInterval(slide,30)
  }
)