JS—无缝轮播

HTML部分：

<div class="show">
	<div class="imgs">
		<img src="img/show/0/1.jpg"/>
		<img src="img/show/0/2.jpg"/>
		<img src="img/show/0/3.jpg"/>
		<img src="img/show/0/4.jpg"/>
		<img src="img/show/0/5.jpg"/>
	</div>
	<div class="btn prev" onselectstart="return false"><<</div>
	<div class="btn next" onselectstart="return false">>></div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

CSS部分：

*{margin:0;padding:0;}
.show{width:500px;height:400px;position:relative;margin:100px auto;}
.show .imgs{width:500px;height:400px;position:relative;overflow:hidden;}
.show .imgs img{width:500px;height:400px;position:absolute;left:500px;border-radius:5px;}
.show .btn{width:50px;line-height:100px;text-align:center;position:absolute;top:150px;
color:#fff;box-shadow: 0 0 3px 3px #fff;border-radius:5px;cursor:pointer;}
.show .prev{left:20px}
.show .next{right:20px}
ul{width:160px;height:22px;position:absolute;bottom:30px;left:170px}
ul li{width:20px;height:20px;list-style:none;float:left;margin-right:10px;
border-radius:5px;border:1px solid #fff;}

JS部分：

第一步先引入jQuery插件

$('ul li:first').css('background','#fff')
$('img:first').css('left','0')
var index=0//当前的下标
var qianindex=0//前一个的下标
$(".prev").click(function(){//向右走
	if(index==0){
		index=$('img').length-1
		qianindex=0
	}else{
		index--
	}
	//切换
	tab()
	qianindex=index
})
$(".next").click(function(){//向左走
	if(index==$('img').length-1){
		index=0
		qianindex=$('img').length-1
	}else{
		index++
	}
	//切换
	tab()
	qianindex=index
})
$('li').click(function(){
	index=$(this).index()
	//切换
	tab()
	qianindex=index
})
function tab(){
	if(index==0 && qianindex==$('img').length-1){//向左走
		//前一个走到left：-500，当前这一个left:500px;向左走Left：0
		$(".imgs img").eq(qianindex).animate({left:"-500px"},500)	
		$(".imgs img").eq(index).css({left:"500px"}).animate({left:"0"},500)
	}else if(index==$('img').length-1 && qianindex==0){//向右走
		//前一个走到left：500，当前这一个left:-500px;向右走Left：0
		$(".imgs img").eq(qianindex).animate({'left':'500px'},1000)
		$(".imgs img").eq(index).css('left','-500px').animate({'left':0},1000)
	}else if(index>qianindex){//向左走
		//前一个走到left：-500，当前这一个left:500px;向左走Left：0
		$(".imgs img").eq(qianindex).animate({left:"-500px"},500)	
		$(".imgs img").eq(index).css({left:"500px"}).animate({left:"0"},500)
	}else{//向右走
		//前一个走到left：500，当前这一个left:-500px;向右走Left：0
		$(".imgs img").eq(qianindex).animate({'left':'500px'},1000)
		$(".imgs img").eq(index).css('left','-500px').animate({'left':0},1000)
	}
	$("ul li").eq(index).css("background","#FFF").siblings().css("background","")
}

效果如下：

 

来源：CSDN

作者：a0404林N

链接：https://blog.csdn.net/yadibaibai/article/details/104071223