js - 使用 scroll属性手撸轮播图 —— 无缝连接，更丝滑
上效果图：
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollLeft</title>
<style>
h3,section{
background-color: skyblue;
padding: 10px;
border-radius: 10px;
margin-top: 20px;
}
section{
padding-bottom: 20px;
}
.slide{
display: block;
width: 500px;
height: 300px;
overflow: hidden;
}
.slide img{
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: top;
}
.slide-wrap{
position: relative;
width: 500px;
}
.slide-wrap > .btn{
position: absolute;
width: 60px;
height: 60px;
background-color: #f1c40f;
top: 110px;
display: flex;
justify-content: center;
align-items: center;
}
.slide-wrap .left-btn{
left: 0;
}
.slide-wrap .right-btn{
right: 0;
}
/* 手撸个箭头 */
.arrow{
width: 30px;
}
.arrow div{
height: 5px;
background-color: #2c3e50;
}
.arrow-top , .arrow-bottom{
width: 20px;
}
.arrow-top{
transform:rotate(-45deg) translateY(-4px)
}
.arrow-bottom{
transform:rotate(45deg) translateY(4px)
}
.arrow-middle{
width: 30px;
transform:translateX(-1.5px)
}
/* 反转箭头 */
.arrow-reverse{
transform: rotate(180deg);
}
</style>
</head>
<body>
<h3>scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离</h3>
<h3><b>当前元素必须设置 overflow: hidden;</b> scrollLeft 才会生效</h3>
<h3>slide设置为display:flex时，谷歌不支持。 为了兼容浏览器，最好设置为block</h3>
<!-- 这个容器只是为了加切换的按钮 -->
<div class="slide-wrap">
<!-- 主要切换区域 -->
<div class="slide">
<img src="./img/wly.jpg" alt="">
<img src="./img/wsm.jpg" alt="">
<img src="./img/wzz.jpg" alt="">
</div>
<div class="btn left-btn" id="slidePrevious">
<div class="arrow">
<div class="arrow-top"></div>
<div class="arrow-middle"></div>
<div class="arrow-bottom"></div>
</div>
</div>
<div class="btn right-btn" id="slideNext">
<div class="arrow arrow-reverse">
<div class="arrow-top"></div>
<div class="arrow-middle"></div>
<div class="arrow-bottom"></div>
</div>
</div>
</div>
<section>
<p>画个箭头</p>
<div class="arrow">
<div class="arrow-top"></div>
<div class="arrow-middle"></div>
<div class="arrow-bottom"></div>
</div>
<p>反转箭头</p>
<div class="arrow arrow-reverse">
<div class="arrow-top"></div>
<div class="arrow-middle"></div>
<div class="arrow-bottom"></div>
</div>
</section>
<script>
let slide = document.getElementsByClassName("slide")[0];
let len = document.getElementsByClassName("slide")[0].children.length;
let i = 0;
let func = function(){
if(i==len){
i=0;
}
slide.scrollTop = i*300;
i++;
}
let timer = setInterval(func,5000)
let slideWrap = document.getElementsByClassName("slide-wrap")[0];
slideWrap.addEventListener("mouseover",function(){
clearInterval(timer);
},{capture:true})
slideWrap.addEventListener("mouseout",function(){
timer = setInterval(func,5000);
},{capture:true})
// 左右切换
let previous = document.getElementById("slidePrevious");
let next = document.getElementById("slideNext");
previous.addEventListener("click",function(){
if(i==0){
console.log("nothing");
i = len-1;
slide.scrollTop = i*300;
return
}else{
i--;
console.log(i);
slide.scrollTop = i*300;
}
},{
capture:true
})
next.addEventListener("click",function(){
if(i==(len-1)){
console.log("nothing");
i=0;
slide.scrollTop = i*300;
return
}else{
i++;
slide.scrollTop = i*300;
}
},{
capture:true
})
</script>
</body>
</html>
由于加载的本地的图片，大佬们可以更改下图片地址，查看效果 。
