1、swiper插件：
需要下载该插件到本地，并用link标签引用其swiper-bundle.min.css文件，用script引用其swiper-bundle.min.js文件，下载地址及官方文档：https://www.swiper.com.cn/。
该插件提供了很多轮播图的参数，可实现各种样式的轮播图，详情参见官方文档。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图-swiper插件</title>
<link rel="stylesheet" href="./swiper-bundle.min.css">
<script src="./swiper-bundle.min.js"></script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https:///70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1125010569,136668811&fm=26&gp=0.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https:///70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1917573789,4173076623&fm=26&gp=0.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https:///timg?image&quality=80&size=b9999_10000&sec=1596352754828&di=d48398b5009a09e83b9cd8f5bc8b3187&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F31%2Ffd984a04246ebd74ef12d746a74ed2e8.jpg" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</body>
<style>
.swiper-container {
width: 790px;
height: 340px;
}
.swiper-slide img{
width: 790px;
height: 340px;
}
</style>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
autoplay: {
delay: 1000,//1秒切换一次
} ,// 自动播放
loop: true, // 循环模式选项
// effect : 'fade',切换效果
// 如果需要分页器
pagination: {el:'.swiper-pagination'},
// 点击分页器是否切换到对应的图片 是 true 否 false
paginationClickable:true,
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
// 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
// 操作包括触碰，拖动，点击pagination等。
autoplayDisableOnInteraction:false,
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
</script>
</html>
2、原生js
不借助插件实现轮播图的思路有主要有三种：第一：当前图片显示，其他图片不显示；第二：通过操作DOM来改变div的背景图片或者img的src来实现图片切换，第三：外层div设置overflow：hidden，图片通过左右移动出现在当前视图中，如下图：
这种图片切换，存在一个问题：因为不是闭环，左右切换到最边上的时候，会有空白，此时可在最前面加上最后一张图P4-1，最后面加上最前面一张图P1-1，点击向左可以直接到P4-1，然后操作位置到正常序列的P4，就可以正常的向左切换，向右也是一样的原理。
这里原生js利用的是操作DOM切换img的src来实现；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图-js</title>
</head>
<style>
ul{
padding-inline-start: 0px; /*浏览器默认样式为40px,会导致分页圆点不居中，这里改为0px*/
}
#loopDiv{
width: 790px;
height: 340px;
margin: 0 auto;
position: relative;
}
#pic{
width: 790px;
height: 340px;
}
#list{
list-style: none;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
}
#list li{
float: left;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
background: #aaa;
margin-right: 10px;
}
.chooseBut{
width: 50px;
height: 80px;
background-color: rgba(0,0,0,0.2);
color: #fff;
font-size: 30px;
line-height: 80px;
text-align: center;
display: none;
}
#left{
position: absolute;
left: 0px;
top: 130px;
}
#right{
position: absolute;
right: 0px;
top: 130px;
}
</style>
<body>
<div id="loopDiv">
<img id="pic" src="">
</img>
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
<div id="left" class="chooseBut"><</div>
<div id="right" class="chooseBut">></div>
</div>
</body>
<script>
var jsDivBox = document.getElementById("loopDiv");
//图片节点
var jsImg = document.getElementById("pic");
//左右按钮节点
var jsLeft = document.getElementById("left");
var jsRight = document.getElementById("right");
//获取所有的li
var jsUl = document.getElementById("list");
var jsLis = jsUl.getElementsByTagName("li");
//让第一个小圆点变为红色
jsLis[0].style.backgroundColor = "red";
//显示当前的图片下标
var currentPage = 0;
//默认显示第一张图片
jsImg.src = "img/" + currentPage + ".jpg";
//启动定时器
var timer = setInterval(func, 1000);
function func() {
currentPage++;
changePic();
console.log(currentPage);
}
function changePic() {
if (currentPage == 3) {
currentPage = 0;
}
if (currentPage == -1) {
currentPage = 2;
}
//更换图片
//"img/1.jpg"
jsImg.src = "img/" + currentPage + ".jpg";
//将所有的小圆点颜色清空
for (var i = 0; i < jsLis.length; i++) {
jsLis[i].style.backgroundColor = "#aaa";
}
//改变对应小圆点为红色
jsLis[currentPage].style.backgroundColor = "red";
}
//鼠标进入
jsDivBox.addEventListener("mouseover", func1, false);
function func1() {
//停止定时器
clearInterval(timer);
//显示左右按钮
jsLeft.style.display = "block";
jsRight.style.display = "block";
}
//鼠标移出
jsDivBox.addEventListener("mouseout", func2, false);
function func2() {
//重启定时器
timer = setInterval(func, 1000);
//隐藏左右按钮
jsLeft.style.display = "none";
jsRight.style.display = "none";
}
//点击左右按钮
jsLeft.addEventListener("click", func3, false);
function func3() {
currentPage--;
changePic();
}
jsLeft.onmouseover = function() {
this.style.backgroundColor = "rgba(0,0,0,0.6)";
}
jsLeft.onmouseout = function() {
this.style.backgroundColor = "rgba(0,0,0,0.2)";
}
jsRight.addEventListener("click", func4, false);
function func4() {
currentPage++;
changePic();
}
jsRight.onmouseover = function() {
this.style.backgroundColor = "rgba(0,0,0,0.6)";
}
jsRight.onmouseout = function() {
this.style.backgroundColor = "rgba(0,0,0,0.2)";
}
//进入小圆点
for (var j = 0; j < jsLis.length; j++) {
jsLis[j].onmouseover = function() {
currentPage = parseInt(this.innerHTML) - 1;
changePic();
};
}
</script>
</html>
3、jQuery
实现原理与上面的原生js一致，只是jQuery提供了更便捷的API，可以节省代码量；这里主要用的是左右平移的方法实现切换，另外左右平移可以实现过渡效果，我这里没有这样实现，有兴趣的小伙伴也可以把自己的代码晒出来，一起学习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图-jQuery</title>
<script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<style type="text/css">
.pic{
width: 790px;
height: 340px;
margin: 10px auto;
position: relative;
overflow: hidden;
}
.content{
height: 340px;
position: absolute;
left: -790px;
top: 0px;
}
.content img{
float: left;
width: 790px;
height: 340px;
}
.index{
position: absolute;
left: 50%;
bottom: 5px;
height: 20px;
transform: translateX(-50%);
list-style: none;
display: flex;
justify-content: space-between;
}
.index li{
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 10px;
background-color: rgba(100,100,100,0.3);
}
.left{
width: 30px;
height:50px;
background-color:rgba(100,100,100,0.5);
position: absolute;
left: 0px;
top: 150px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #fff;
display: none;
}
.right{
width: 30px;
height:50px;
background-color:rgba(100,100,100,0.5);
position: absolute;
right: 0px;
top: 150px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #fff;
display: none;
}
.index .first{
background-color:black;
}
</style>
</script>
</head>
<body>
<div class="pic">
<div class="content">
<img src="./img/3.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
<ul class="index">
<li class="first"></li>
<li></li>
<li></li>
</ul>
<div class="right">></div>
<div class="left"><</div>
</div>
<script type="text/javascript">
$(function(){
console.log($("img"));
//每个固定的时间移动图片
var timer = setInterval(picLoop,1000);
var index = 0;
function picLoop(){
index++;
console.log(index);
if (index==3) {index=0;}
$(".content").css("left",-790*(index+1));
$("li").eq(index).css("background-color","black")
.siblings().css("background-color","rgba(100,100,100,0.3)");
}
//定时器的控制
$(".pic").hover(function(){
clearInterval(timer);
$(".left").show();
$(".right").show();
},function(){
timer = setInterval(picLoop,1000);
$(".left").hide();
$(".right").hide();
})
$("li").mouseover(function(){
$(this).css("background-color","black")
.siblings().css("background-color","rgba(100,100,100,0.3)");
index = $(this).index();
console.log(index);
$(".content").css("left",-790*(index+1));
})
$(".left").click(function(){
index--;
if (index==-1) {index=2;}
$(".content").css("left",-790*(index+1));
$("li").eq(index).css("background-color","black")
.siblings().css("background-color","rgba(100,100,100,0.3)");
})
$(".right").click(function(){
index++;
if (index==3) {index=0}
$(".content").css("left",-790*(index+1));
$("li").eq(index).css("background-color","black")
.siblings().css("background-color","rgba(100,100,100,0.3)");
})
})
</script>
</body>
</html>
除以上三种方法以外，还可以用纯css来实现，这里就不列出来了，因为日常也不会用到，哈哈哈，偷个懒。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
