JS轮播图的实现方法2
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了JS轮播图的具体实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS轮播图的实现代码，供大家参考，具体内容如下
需求：
自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图
效果图：
![轮播图]
思路：
将所有需要轮播的图片横向排列，可视区大小设置为只能显示一张图片，给容器设置移出隐藏后，可视区之外的部分被隐藏，这样我们就只能看见一张图片。
轮播实现是改变整个图片画幅的left值或者margin-left 值，当点击时移动整个画幅单个图片的宽度即可实现滚动到下一张。
后面功能实现顺序依旧是写法一里的思路。
HTML部分：
<div id="banner"> <div class="w"> <!-- 左右箭头--> <span class="iconfont icon-zuojiantou"></span> <span class="iconfont icon-youjiantou"></span> <!-- 轮播图--> <ul > <li><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> </ul> <!-- /小圆点--> <ol id="circleContainer"> </ol> </div> </div>
CSS部分：
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.w {
width: 1000px;
height: 600px;
margin: 100px auto 0;
position: relative;
overflow: hidden;
}
ul {
width: 1000%;
transition: all .5s ease-in-out;
}
ul li {
float: left;
width: 1000px;
}
ul li img {
width: 100%;
height: 600px;
}
.iconfont {
color: white;
position: absolute;
font-size: 30px;
top: calc(50% - 15px);
background-color: rgba(216, 216, 216, 0.23);
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
cursor: pointer;
}
.iconfont:hover {
color: palegreen;
}
.icon-zuojiantou {
left: 0;
}
.icon-youjiantou {
right: 0;
}
#circleContainer {
position: absolute;
bottom: 10px;
left: calc(50% - 30px);
}
#circleContainer li {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
margin-right: 5px;
}
#circleContainer .change {
background-color: palegreen;
}
</style>
JS部分：
<script>
let timer = setInterval(function () {
arrow_r.onclick();
},2000);
let w = document.querySelector(".w");
w.addEventListener("mouseenter",function () {
clearInterval(timer);
});
w.addEventListener("mouseleave",function () {
clearInterval(timer);
timer = setInterval(function () {
arrow_r.onclick();
},2000);
});
//获取元素
let ul = document.querySelector("ul");
let ol = document.querySelector("#circleContainer");
let arrow_r = document.querySelector(".icon-youjiantou");
let arrow_l = document.querySelector(".icon-zuojiantou");
let ImgWidth = ul.children[0].offsetWidth;
let location_i = 0 ;
// 创建小圆点 动态生成小圆点，图片增加时小圆点也随之增加
for (let i = 0; i<ul.children.length;i++){
let li = document.createElement("li");
li.setAttribute("index",i);
li.addEventListener("click",function () {
let index = this.getAttribute("index");
move(ul,index);
location_i = index ;
});
ol.appendChild(li);
}
let liclone = ul.children[0].cloneNode(true);
ul.appendChild(liclone);
// 轮播函数
function move(targetObj,n) {
if (n === targetObj.children.length ) {
targetObj.style.marginLeft = "0px";
n = 0;
}
targetObj.style.marginLeft = -n * ImgWidth +"px";
for (let i =0 ;i<ol.children.length;i++){
ol.children[i].className = "";
}
n === 3 ? ol.children[0].className = "change": ol.children[n].className = "change";
}
ol.children[0].className = "change";
// 右箭头点击
arrow_r.onclick = function () {
if (location_i === 3) {
location_i = 0 ;
ul.style.marginLeft = "0px" ;
}
location_i++;
move(ul,location_i);
};
// 左箭头点击
arrow_l.addEventListener("click",function () {
if (location_i == 0) {
location_i = ul.children.length -1 ;
}
location_i--;
move(ul,location_i);
})
</script>
精彩专题分享：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：JS实现拖动模糊框特效
下一篇：JS轮播图的实现方法