轮播图
- 说实话这篇文章我不是特别想写,因为轮播图的实现原理也比较简单,但是今天还是来说说这个事儿,算是加深一下印象2333
- 一般常见的轮播图,例如小米官网的轮播图
- 你会发现轮播图与的结构基本上是这样:一个父容器里面有一个图片集合,还有两个按钮,分别是“下一张”按钮和“上一张”按钮,可能还会有“指示器”,就是这个:
- 今天来说说一个不一样的轮播图,但是本质上还是轮播图,如下:
- 一共是十张图片,每次最多活动四张
- 点击next切换到下一页,点击prev切换到上一页
- html布局是这样的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
</head>
<body>
<div class="container">
<div class="prev" id="prev">prev</div>
<div class="next" id="next">next</div>
<ul class="slider" id="slider">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
<li class="slider-item">5</li>
<li class="slider-item">6</li>
<li class="slider-item">7</li>
<li class="slider-item">8</li>
<li class="slider-item">9</li>
<li class="slider-item">10</li>
</ul>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container{
width: 1200px;
position: relative;
overflow: hidden;
}
.slider{
width: 3050px;
height: 350px;
position: relative;
top: 0;
left: 0;
white-space: nowrap;
font-size: 0;
transition: left 0.3s ease;
}
.slider::-webkit-scrollbar{
display: none;
}
.prev{
width: 50px;
height: 80px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
font-weight: 400;
color: #fff;
text-align: center;
line-height: 80px;
cursor: pointer;
z-index: 1;
transition: all 0.3s ease;
}
.next{
width: 50px;
height: 80px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 16px;
font-weight: 400;
color: #fff;
text-align: center;
line-height: 80px;
cursor: pointer;
z-index: 1;
transition: all 0.3s ease;
}
.prev:hover{
background-color: rgba(35, 170, 242, 0.8);
}
.next:hover{
background-color: rgba(35, 170, 242, 0.8);
}
.slider-item{
display: inline-block;
margin-right: 14px;
width: 289.5px;
height: 350xpx;
background-color: hotpink;
text-align: center;
line-height: 350px;
font-size: 30px;
font-weight: 400;
color: #fff;
}
var slider = document.getElementById("slider")
var prevbtn = document.getElementById("prev")
var nextbtn = document.getElementById("next")
prevbtn.onclick = function(){
var old_left = parseInt(getComputedStyle(slider).left || slider.style.left)
var new_left = 0
if(Math.abs(old_left) >= 1214){
new_left = old_left + 1214
}
slider.style.left = new_left+"px"
}
nextbtn.onclick = function(){
var old_left = parseInt(getComputedStyle(slider).left || slider.style.left)
var k = slider.clientWidth - Math.abs(old_left)
var new_left = 0;
if(k >= 2428){
new_left = old_left - 1214
}else if(k > 1214){
new_left = old_left - k + 1228
}
slider.style.left = new_left+"px"
}