jQuery+css 实现无缝滚动轮播

        这篇文章，主要介绍jquery+css实现无缝滚动轮播，先看一下效果图： 

1、HTML页面结构

<div id="main">
<!-- 图片部分 -->
<ul class="img">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
<!-- 小点部分 -->
<ul class="num">

</ul>
<!-- 按钮部分 -->
<a href="javascript:;" class="btn btn-left"><</a>
<a href="javascript:;" class="btn btn-right">></a>
</div>

2、CSS样式部分

*{padding:0px;margin:0px;}
#main{width:800px;height:400px;margin:0 auto;border:1px solid #ccc;overflow:hidden;position: relative;margin-top:30px;}
.img{list-style: none;width:10000px;position: absolute;left:0px;}
.img li{float:left;width:800px;height:400px;}
.img li img{width:800px;height:400px;}
.num{width:100%;text-align:center;position: absolute;bottom:20px;}
.num li{width:20px;height:20px;background-color: #fff;border:1px solid #ccc;border-radius:50%;display:inline-block;}
.num li.active{background: red;}
#main:hover .btn{display:block;}
.btn{width:30px;height:60px;background-color: #ccc;line-height:60px;text-align:center;position: absolute;top:50%;margin-top:-30px;text-decoration: none;display:none;}
.btn-left{left:0px;}
.btn-right{right:0px;}

3、jQuery代码部分

        使用jquery之前，需要引入 jquery文件，<script src="jquery-3.3.1.min.js"></script>

// 克隆第一张图片
var firstImg=$(".img li").first().clone();

// 追加到
$(".img").append(firstImg);

// 图片的个数
var size=$(".img li").length;

// 小点产生
for(var i=0;i<size-1;i++){
$(".num").append("<li></li> ");
}

// 默认添加类
$(".num li").first().addClass("active");

// 移动的距离
var moveX=$("#main").width();

var move=0;
// 定时器
var ding=null;

ding=setInterval(function(){
move++;
moveDiv();
},3000);

// 移动函数
function moveDiv(){

// 判断
if (move>=size) {
$(".img").css("left",0);
move=1;
};
// 判断
if (move<0) {
$(".img").css("left",-(size-1)*moveX);
move=size-2;
};

// 移动图片的ul
$(".img").animate({left:-moveX*move},1000);

// 同时改变小点
// 判断小点
if (move==size-1) {
$(".num li").eq(0).addClass("active").siblings().removeClass("active");
}else{
$(".num li").eq(move).addClass("active").siblings().removeClass("active");
}
}

// 点击右移
$(".btn-right").click(function(){
if (!$(".img").is(":animated")) {
// 右移
move++;
moveDiv();
}
});

// 点击左移
$(".btn-left").click(function(){
if (!$(".img").is(":animated")) {
// 左移
move--;
moveDiv();
}
});

// 鼠标悬停
$("#main").mouseover(function(){
clearInterval(ding);
}).mouseout(function(){
ding=setInterval(function(){
move++;
moveDiv();
},3000);
});

// 鼠标点击小点事件
$(".num li").click(function(){
idx= $(this).index();
move=idx;
moveDiv();
});