image.png
思路
通过banner下方的小圆点，控制图片的切换。
给左右箭头添加点击事件（点击时切换图片，并且下方的小圆点跟着切换）。
自动切换（2秒切换一次图片）。
当鼠标移动到banner上时，停止“自动切换”（停止第3步）。
当鼠标移开时，开始继续“自动切换”（继续开始第3步）。
原理
image.png
黑框是容器，要做无缝轮播，头和尾的图片需要一样。
所有图片都放在 ul 里面，通过移动 ul 实现图片的切换。
容器要设置 overflow: hidden，把溢出部分的图片隐藏掉。
HTML代码
<div class="banner"> <ul class="bannerAllPic"> <li><a href="#"><img src="../img/bg1.jpg" alt=""></a></li> <li><a href="#"><img src="../img/bg2.jpg" alt=""></a></li> <li><a href="#"><img src="../img/bg3.jpg" alt=""></a></li> <li><a href="#"><img src="../img/bg4.jpg" alt=""></a></li> <li><a href="#"><img src="../img/bg5.jpg" alt=""></a></li> <li><a href="#"><img src="../img/bg6.jpg" alt=""></a></li> </ul> <div class="arrow"> <a href="javascript:void(0)" class="aLeft"><</a> <a href="javascript:void(0)" class="aRight">></a> </div> <ol class="circleAll"></ol></div>
CSS代码
* { margin: 0; padding: 0; list-style: none;
}a { text-decoration: none;
}.banner { width: 700px; height: 314px; margin: 50px auto; overflow: hidden; position: relative;
}.bannerAllPic { position: relative;
}.bannerAllPic>li { float: left;
}.arrow a{ width: 30px; height: 50px; background: rgba(0,0,0,.4); position: absolute; top: 50%; transform: translateY(-50%); text-align: center; line-height: 50px; color: #fff; font-size: 20px; font-family: '宋体'; display: none;
}.banner:hover .arrow a { display: block;
}.aLeft { left: 0;
}.aRight { right: 0;
}.circleAll { position: absolute; background: rgba(0,0,0,.4); bottom: 10px; left: 50%; transform: translateX(-50%); border-radius: 20px; padding: 0 5px;
}.circleAll li { width: 12px; height: 12px; border-radius: 50%; background: #fff; float: left; margin: 3px 5px; cursor: pointer;
}.circleAll .now { background: pink;
}jQuery代码
<script src="../scripts/jquery.min.js"></script><script>
$(document).ready(function() { var banner = $('.banner'); // 获取容器
var bannerUl = $('.bannerAllPic'); // 获取ul（装了所有图片的ul）
var aLeft = $('.aLeft'); // 获取左箭头
var aRight = $('.aRight'); // 获取右箭头
var circleAll = $('.circleAll'); // 获取小圆点的容器（ol）
var width = parseInt($('.banner').css('width')); // 获取容器的宽度
var index = 0; // 计数器
/*
根据上图所示，我们需要把第一张图复制到最后
*/
// 获取第一张图，用clone()复制，并把值赋给变量 liFirst，把变量 liFirst 添加到 ul后面。
var liFirst = $('.banner>.bannerAllPic>li:first').clone();
bannerUl.append(liFirst); /*
根据图片的数量来控制ul的宽度
*/
// 获得图片的数量，并赋给变量 imgNum
var imgNum = $('.bannerAllPic > li').length;
bannerUl.css('width' , imgNum * width); // 设置ul的宽度
// 根据图片的数量来生成小圆点的个数
while(index < imgNum-1) {
circleAll.append("<li></li>");
index++;
} // 设置第一个圆点的默认样式
var firstCircle = $('.circleAll>li:first');
firstCircle.addClass('now'); // 通过小圆点控制图片切换
var littleCircle = $('.circleAll>li');
littleCircle.click(function() {
$(this).addClass('now').siblings().removeClass('now'); // 被点击的小圆点添加“now”类，其他小圆点移除“now”类
index = $(this).index(); // 获取当前被点击的小圆点的下标值
bannerUl.animate({left: -index * width}); // 通过当前小圆点的下标值做参考，移动 ul
}); // 点击右侧按钮
/*
显示倒数第二张（即展示的最后一张）时，再按一下，划到最后一张（即复制出来的那张，和第一张一 模一样）。再按一下，把index变为0，同时会瞬间切换到第一张，因为没做动画，所以用户看不出来切换效果。
*/
/*
如果计数器（index）变成所有图片的数量的值时（即已经指向了最后一张图），把计数器变回0（指向第一张图），并把ul的left设为0。
*/
aRight.click(function() { if(index == imgNum-1) {
index = 0;
bannerUl.css('left' , 0);
}
index++;
bannerUl.stop().animate({left: -index * width}); // 每点击一次右箭头，小圆点就向后指示一次。
if(index == imgNum-1){
littleCircle.eq(0).addClass('now').siblings().removeClass('now');
} else {
littleCircle.eq(index).addClass('now').siblings().removeClass('now');
}
}); // 点击左箭头的原理和点击右箭头的原理差不多
aLeft.click(function() { if(index<=0) {
index = imgNum-1;
bannerUl.css('left' , -index * width);
}
index--;
bannerUl.stop().animate({left: -index * width});
littleCircle.eq(index).addClass('now').siblings().removeClass('now');
}); // 自动切换
var timeId = setInterval(function() {
aRight.click();
}, 2000); // 鼠标经过事件
banner.hover(function() {
clearInterval(timeId);
}, function() {
timeId = setInterval(function() {
aRight.click();
}, 2000);
});
});</script>
作者：滑滑兔
链接：https://www.jianshu.com/p/f4ef636d06a9
随时随地看视频
