Js无缝轮播
实现的功能
-
进入页面，轮播图自动向右切换
-
鼠标悬停在轮播图部分时，轮播图停止切换，鼠标离开继续自动切换
-
鼠标悬停在下方的小圆点上时，自动切换到对应的图片
-
鼠标点击向左或向右按钮时，图片会向左或向右切换
效果图如下
无逢轮播图实现原理
所谓无逢轮播，就是几张图片向左或者向右切换，使最后一张图片和第一张图片首尾相连
第一张图片和最后一张图片之间的切换，也像相邻的图片之间的切换一样，实现几张图片左右滚动切换的效果
那么，问题来了
怎样使第一张图片和最后一张图片首尾相边呢？
我是这样做的
首先，需要一个div容器来包裹这个轮播图部分，我给这个容器添加了类名carouselContainer，这个容器的宽度和高度设置为图片的宽度和高度，我设置的是500px* 300px，还需要设置一个属性：overflow : hidden;
然后需要一个ul标签来放置多张图片，ul标签的ID为carousel
ul标签中放置多个li标签，每个li标签中都有一个img标签，用来放置图片，这几个标签向左浮动，在实现图片切换的时候，只需要移动ul即可
这部分是重点！
如果有3张图片，那我需要4个li标签，前三个li标签中放的是这三张图片，最后一个li中放的是第一张图片
如果有4张图片，那就需要5个li标签，前4个li标签放的是这4张图片，最后一个li中放的是第一张图片 以此类推
在这里，我就以3张图片为例啦！
为了方便理解，画了个草图
首先，容器中显示的是第一张图片，即 索引为0的 粉色部分，（0、1、2、3分别代表几张图片的索引值）向右切换时显示的应该是0、1、2、0、1、2...
那么3有什么作用呢？
这里就是重点中的重点啦
当图片切换到2时，下一张是3，这时再切换时，切换到3
当前图片是3，3和1是同一张图征，再切换应该切换到2
如果当前图片是3，同时又要向右切换，我们就把整个ul的margin-left设置为0，然后再让整个ul向左移动，移动到1（这里我们以为看到的是第一张图片，其实是因为第一张图片和最后一张图片是一样的，我们这时看到的是最后一张图片）
如果当前图片是0，同时又要向左切换，我们就把整个ul的margin-left设置为3*每张图片的宽度，再让整个ul向右移动，移动到2
这样就实现了第一张图片和最后一张图片的首尾相连。
好了，原理就是这样了
Html代码
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>无缝轮播图</title>
<script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 100px;
text-align: center;
}
.carouselContainer {
width: 500px;
height: 300px;
border: 1px solid #eee;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
position: relative;
border-radius: 5px;
}
#carousel {
font-size: 0px;
display: flex;
}
.arrowItems {
position: absolute;
width: 100%;
font-size: 60px;
display: flex;
top: 50%;
justify-content: space-between;
height: 60px;
transform: translateY(-50%);
}
.arrowItems div {
width: 30px;
text-align: center;
line-height: 46px;
vertical-align: middle;
background: rgba(0, 0, 0, 0.2);
cursor: pointer;
color: rgba(255, 255, 255, 0.4);
}
.arrowItems div:hover {
background: rgba(0, 0, 0, 0.5);
color: rgba(255, 255, 255, 0.6);
}
.dots {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 25px;
background: rgba(255, 255, 255, 0.5);
border-radius: 10px;
padding: 3px;
}
.dot {
width: 12px;
height: 12px;
background: #fff;
float: left;
border-radius: 6px;
margin: 0 3px;
}
.current {
background: red;
}
img{
width:500px;
height:300px;
}
</style>
</head>
<body>
<div class="container">
<h2>无缝轮播图</h2>
<div class="carouselContainer">
<ul id="carousel">
<li><img src="http://p4.qhimg.com/bdm/960_593_0/t01e71082414f50bd52.jpg"></li>
<li><img src="http://p0.qhimg.com/bdm/480_296_0/t01f3894323e88ea123.jpg"></li>
<li><img src="http://p15.qhimg.com/bdm/960_593_0/t01acc12e86173a0606.jpg"></li>
<li><img src="http://p6.qhimg.com/bdm/960_593_0/t0127bd4f8758c42304.jpg"></li>
<li><img src="http://p6.qhimg.com/bdm/480_296_0/t01e501e8d6a74a1a1d.jpg"></li>
<li><img src="http://p1.qhimg.com/bdm/960_593_0/t01f95f85f3f4c2c938.jpg"></li>
</ul>
<div class="arrowItems">
<div class="left">‹</div>
<div class="right">›</div>
</div>
<div class="dots">
<div class="dot current"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var picIndex = 0;
//为小圆点绑定鼠标经过事件
$('.dots div').mouseover(function(){
picIndex = $(this).index();
let left = -(picIndex) * 500 + 'px';
//鼠标经过小圆点时，切换对应的图片
$('#carousel').stop().animate({'margin-left': left});
//当前小圆点为红色，其他为白色
$(this).addClass('current').siblings().removeClass('current');
});
//自动播放
autoplayCarousel();
var timeId;
function autoplayCarousel(){
timeId = setInterval(function(){
$('.arrowItems .right').click();
}, 1000)
}
//右边按钮
$('.arrowItems .right').click(function(){
if(picIndex == $('#carousel li').length - 1) {
picIndex = 0;
$('#carousel').css({'margin-left': '0px'});
}
picIndex ++;
let left = -(picIndex) * 500 + 'px';
$('#carousel').stop().animate({'margin-left': left});
//控制小圆点
if(picIndex == $('#carousel li').length - 1) {
$('.dots div').eq(0).addClass('current').siblings().removeClass('current');
}else {
$('.dots div').eq(picIndex).addClass('current').siblings().removeClass('current');
}
});
//左边按钮
$('.arrowItems .left').click(function(){
if(picIndex == 0) {
picIndex = $('#carousel li').length - 1;
$('#carousel').css({'margin-left': -($('#carousel li').length - 1) * 500 + 'px'});
}
picIndex --;
let left = -(picIndex) * 500 + 'px';
$('#carousel').stop().animate({'margin-left': left});
//控制小圆点
if(picIndex == $('#carousel li').length - 1) {
$('.dots div').eq(0).addClass('current').siblings().removeClass('current');
}else {
$('.dots div').eq(picIndex).addClass('current').siblings().removeClass('current');
}
});
$('.carouselContainer').mouseover(function(){
clearInterval(timeId);
});
$('.carouselContainer').mouseout(function(){
autoplayCarousel();
});
</script>
</html>
I have a dream : Sandy beach B-J-N.
