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();
});

          本文中介绍了jQuery+css 实现无缝滚动轮播图，希望大家多加练习，欢迎大家一起谈论学习交流。

-THE END-