本次轮播图的制作主要分为3个部分，分别是：设置定时器自动轮播；点击左右切换按钮轮播；下方点击按钮轮播。具体实现步骤如下：
(效果图)
html部分代码如下：
<div class="slidebox">
<ul class="ul1" id="ul1">
<li><img src="img/solid.png" width="100%" height="500px">
<p class="slide-p1">走进酒文化 品味历史悠酒</p>
</li>
<li><img src="img/jiuwh.jpg" width="100%" height="500px">
</li>
<li><img src="img/jiu-1.jpg" width="100%" height="500px">
</li>
<li><img src="img/jiu2.jpg" width="100%" height="500px">
</li>
</ul>
<div class="left-botton indexs" id="left-botton">
<
</div>
<div class="right-botton indexs" id="right-botton">
>
</div>
<ul class="ul2 indexs" id="ul2">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>css部分代码如下：
.slidebox {
width: 100%;
height: 500px;
position: relative;
}
.slidebox ul {
margin: 0;
padding: 0;
list-style: none;
}
.ul1 {
width: 100%;
height: 100%;
}
.ul1>li {
position: absolute;
top: 0;
left: 0;
}
.left-botton {
margin-left: 50px;
width: 80px;
height: 80px;
background: whitesmoke;
text-align: center;
color: skyblue;
line-height: 70px;
position: absolute;
font-size: 50px;
top: 195px;
left: 0;
border-radius: 100%;
opacity: 0;
}
.slidebox:hover .left-botton {
opacity: 0.8;
transition: 0.5s;
}
.right-botton {
margin-right: 50px;
width: 80px;
height: 80px;
background: whitesmoke;
opacity: 0;
text-align: center;
color: skyblue;
line-height: 70px;
position: absolute;
font-size: 50px;
top: 195px;
right: 0;
border-radius: 100%;
}
.slidebox:hover .right-botton {
opacity: 0.8;
transition: 0.5s;
}
.left-botton:hover {
cursor: pointer;
color: whitesmoke;
opacity: 1;
background: skyblue;
}
.right-botton:hover {
cursor: pointer;
color: whitesmoke;
opacity: 1;
background: skyblue;
}
.ul2 {
position: absolute;
bottom: 25px;
right: 560px;
}
.ul2>li {
width: 60px;
height: 10px;
background: white;
line-height: 20px;
float: left;
border-radius: 3px;
margin-right: 30px;
}
.ul2>li:hover {
background: orangered;
cursor: pointer;
color: white;
}
.ul2>li:nth-child(1) {
background: orangered;
color: white;
}
.ul1>li:nth-child(1) {
z-index: 100;
}
.indexs {
z-index: 200;
}JS部分代码如下：
var imgs = document.getElementById("ul1").children; //找到需要操作的所有图片
var botton = document.getElementById("ul2").children; //找到需要操作的所有下方点击按钮
var leftbotton = document.getElementById("left-botton"); //找到需要操作的左切换按钮
var rightbotton = document.getElementById("right-botton"); //找到需要操作的右切换按钮
var index = 0; //标记当前展示图片的索引
var dingshiqi; //定义定时器
chongqi(); //调用重启定时器
//绑定定时器自动切换事件
function chongqi() {
dingshiqi = setInterval(function() {
index++; //跳转到下一张图片
if (index == imgs.length) {
index = 0;
} //使图片无限循环播放
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
}
imgs[index].style.cssText = "z-index:100;"; //显示当前图片
botton[index].style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
}, 4000); //定时器每隔4秒自动跳转到下一张图片
}
//绑定左切换按钮的点击事件
leftbotton.onclick = function() {
clearInterval(dingshiqi); //关闭定时器
index--; //跳转到上一张图片
if (index < 0) {
index = imgs.length - 1;
}
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
}
imgs[index].style.cssText = "z-index:100;"; //显示当前图片
botton[index].style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
chongqi(); //重启定时器
}
//绑定右切换按钮的点击事件
rightbotton.onclick = function() {
clearInterval(dingshiqi); //关闭定时器
index++; //跳转到下一张图片
if (index > imgs.length - 1) {
index = 0;
}
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
}
imgs[index].style.cssText = "z-index:100;"; //显示当前图片
botton[index].style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
chongqi(); //重启定时器
}
//绑定所有点击按钮的点击事件
for (let i = 0; i < imgs.length; i++) {
botton[i].onclick = function() {
clearInterval(dingshiqi); //关闭定时器
index = i;
for (let i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
}
imgs[index].style.cssText = "z-index:100;"; //显示当前图片
this.style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
chongqi(); //重启定时器
}
}通过以上步骤就可以实现一个完整的轮播图效果了
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
