原生js实现左右了轮播图效果
2023-12-28 15:34:14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
/*除去左、右箭头的下划线*/
text-decoration: none;
}
.scrollLoop_box {
width: 980px;
height: 400px;
border: 1px solid #000;
margin: 20px auto;
position: relative;
}
.scrollLoop_main {
height: 400px;
width: 100%;
/* overflow: scroll; */
overflow: hidden;
}
.scrollLoop_divImgs {
width: 100%;
height: 400px;
}
.scrollLoop_divImgs img {
width: 980px;
height: 400px;
float: left;
}
.scrollLoop_arrow {
/*记得给宽高*/
width: 30px;
height: 50px;
border-radius: 3px;
display: inline-block;
text-align: center;
font-size: 20px;
line-height: 50px;
position: absolute;
top: 46%;
font-weight: bold;
display: none;
color: #fff;
padding: 3px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.scrollLoop_left {
left: 20px;
}
.scrollLoop_right {
right: 20px;
}
.scrollLoop_box:hover .scrollLoop_arrow {
display: block;
}
.scrollLoop_ul {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
}
.scrollLoop_ul li {
list-style-type: none;
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
margin: 0 1px;
background-color: aliceblue;
font-size: 12px;
text-align: center;
line-height: 15px;
cursor: pointer;
}
.scrollLoop_bg {
background-color: #999 !important;
}
</style>
</head>
<body>
<div class="scrollLoop_box">
<div class="scrollLoop_main">
<div class="scrollLoop_divImgs">
<img src="./images/1.webp" />
<img src="./images/2.webp" />
<img src="./images/3.webp" />
<img src="./images/4.webp" />
</div>
</div>
<a href="javascript:;" class="scrollLoop_arrow scrollLoop_left"><</a>
<a href="javascript:;" class="scrollLoop_arrow scrollLoop_right">></a>
<ul class="scrollLoop_ul">
<!-- <li class="scrollLoop_bg"></li>
<li></li>
<li></li>
<li></li> -->
</ul>
</div>
</body>
<script>
(function () {
var box = document.querySelector(".scrollLoop_box");
var main = document.querySelector(".scrollLoop_main");
var divImgs = document.querySelector(".scrollLoop_divImgs");
var imgs = document.querySelectorAll("img");
var btnLift = document.querySelector(".scrollLoop_left");
var btnRight = document.querySelector(".scrollLoop_right");
var scrollLoop_ul = document.querySelector(".scrollLoop_ul");
console.log(imgs);
// 把.scrollLoop_divImgs内的第一个img克隆然后在最后一个追加img
divImgs.appendChild(imgs[0].cloneNode(true));
divImgs.style.width = imgs.length * imgs[0].offsetWidth + "px";
//两个定时器
var dsq1, dsq2;
//单个图片的长度,为后续移动路程的计算做准备
var imgW = imgs[0].offsetWidth;
//第一张显示的图片下标
var imgIndex = 0;
let Html = "";
for (var i = 0; i < imgs.length; i++) {
Html += `<li class="${i == imgIndex ? "scrollLoop_bg" : ""}"></li>`;
}
var scrollLoop_ul = document.querySelectorAll(".scrollLoop_ul")[0];
scrollLoop_ul.innerHTML = Html;
var lis = document.querySelectorAll(".scrollLoop_ul li");
//初始的main的scrollLeft值 600px
main.scrollLeft = imgW * imgIndex;
//效果1:图片切换
function moveMent() {
//从第2张图片开始递增
imgIndex++;
console.log(imgIndex);
// 当下标大于图片数量时,从第三1张图片开始
if (imgIndex > imgs.length - 1) {
imgIndex = 0;
main.scrollLeft = imgW * imgIndex;
}
move();
// //这里实现图片自己轮播时,按钮背景色跟随图片的切换改变
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
lis[imgIndex].className = "scrollLoop_bg";
}
console.log(lis, 222);
//效果2:点击按钮时,切换到对应图片,并对应改变背景色
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
console.log(i, 2222);
imgIndex = i;
move();
for (let j = 0; j < lis.length; j++) {
lis[j].className = "";
}
lis[imgIndex].className = "scrollLoop_bg";
};
}
//效果3:鼠标移入,轮播停止;鼠标移出,轮播继续
main.onmouseover = function () {
clearInterval(dsq1);
};
main.onmouseout = function () {
dsq1 = setInterval(moveMent, 3000);
};
btnRight.onmouseover = function () {
clearInterval(dsq1);
};
btnRight.onmouseout = function () {
dsq1 = setInterval(moveMent, 3000);
};
btnLift.onmouseover = function () {
clearInterval(dsq1);
};
btnLift.onmouseout = function () {
dsq1 = setInterval(moveMent, 3000);
};
scrollLoop_ul.onmouseover = function () {
clearInterval(dsq1);
};
scrollLoop_ul.onmouseout = function () {
dsq1 = setInterval(moveMent, 3000);
};
//效果4:点击右边按钮,显示下一张
btnRight.onclick = function () {
moveMent();
};
//效果5:点击左边按钮,显示上一张
btnLift.onclick = function () {
imgIndex--;
if (imgIndex < 0) {
imgIndex = imgs.length - 1;
//给main设置上一张图片的滚动距离
main.scrollLeft = imgW * (imgIndex + 1);
}
move();
// //这里实现图片自己轮播时,按钮背景色跟随图片的切换改变
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
lis[imgIndex].className = "scrollLoop_bg";
};
//调用moveMent函数,设置图片3秒切换一次
//注意该调用需要放在其他效果代码后面
dsq1 = setInterval(moveMent, 3000);
function move() {
//获取开始值和结束值,指每2张图片之间移动的距离
var start = main.scrollLeft;
var end = imgIndex * imgW;
var speed = (end - start) / 20; //speed=30
//num为步数,宽度为600px,speed为30,则走完需要20步
var num = 0;
clearInterval(dsq2);
dsq2 = setInterval(function () {
num++;
if (num == 20) {
clearInterval(dsq2);
main.scrollLeft = end;
} else {
start += speed;
main.scrollLeft = start;
}
//注意dsq2的时间和dsq1时间的大小,dsq2的时间间隔不能太大
}, 30);
}
})();
</script>
</html>
文章来源:https://blog.csdn.net/namechenfl/article/details/135267764
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!