JS轮播图 JS轮播图的实现方法2
hthththtt 人气:0想了解JS轮播图的实现方法2的相关内容吗，hthththtt在本文为您仔细讲解JS轮播图的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：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>
加载全部内容