看了看记录,发现上次发表文章时间竟然是去年的时候了,有点小尴尬,每次都有一种发表文章的冲动,但懒汉加成,又让我望而止步。这几天刚好用原生JS实现了平移轮播图,跟淘宝上的效果一样,话不多说,代码奉上。
先看轮播图的结构,总共结构分为6张图片,两个左右移动按钮,还有下面的控制小圆点。
<div class="box">
<div class="box_img">
<img src="img/5.jpg">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/1.jpg">
</div>
<button><</button>
<button>></button>
<ul>
<li class="act"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
再看样式,样式我是用less写的,简单讲就是将7张图片横排在一起这样宽度就超出包裹它的父容器,其中首尾两张图片是一样的,就是为了在平移切换图片的时候有个过度效果。但是给父容器设置一个溢出隐藏,这样每次就只会看到一张图片了,另外可以左右按钮还有下面的控制圆点都可以定位上去。
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
position: relative;
width:520px;
height: 280px;
cursor: pointer;
//overflow: hidden;
border: 5px solid;
margin: 100px auto;
&:hover button{
display: block;
}
&>.box_img{
display: flex;
position: absolute;
left: -520px;
}
&>button{
display: none;
width: 30px;
height: 60px;
}
&>button:nth-of-type(2){
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
&>button:nth-of-type(1){
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
&>ul{
position: absolute;
left: 50%;
top: 250px;
display: flex;
align-items: center;
width: 100px;
height: 20px;
border-radius: 20px;
justify-content: space-around;
transform: translateX(-50%);
background: rgba(0,0,0,.5);
&>.act{
background: orange;
}
&>li{
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
}
}
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190103115206205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg1NTU0MQ==,size_16,color_FFFFFF,t_70)
接下看看重点如何实现JS,先声明一个函数,里面设定了每次平移轮播的时间为800毫秒,然后假设每次总共移动的距离为dis是个变量当做参数传进去,每移动一小次的距离为eachDis,然后通过定时器来实行,当往左边移动的时候dis大于0,并且当当前的距离小于移动的距离或者当右移动的时候dis小于0,并且当前的距离大于要移动后的距离,只要满足两者的条件,就开始移动。当不满足的时候清空定时器。
var oBox = document.getElementsByClassName("box")[0];
var oImg = document.getElementsByClassName("box_img")[0];
var oLi = document.getElementsByTagName("li");
var oBtn = document.getElementsByTagName("button");
var oUl = document.getElementsByTagName("ul")[0];
var timer1,timer2;
var index = 0;
var flag = true;
function moveImg(dis) {
flag = false;
var time = 800;//设定每次轮播的时间
var eachTime = 40;//设定每次移动一下段距离时间
var eachDis = dis/(time/eachTime);//每次移动一小次的距离
var newLeft = oImg.offsetLeft + dis;//移动后的距离
function eachMove() {
if (dis>0&& oImg.offsetLeft<newLeft ||dis<0 && oImg.offsetLeft>newLeft){
oImg.style.left = oImg.offsetLeft + eachDis +"px"
}else {
clearInterval(timer1);
// oImg.style.left = newLeft +"px";
if (newLeft == -3120) oImg.style.left = -520 +"px";//当平移到第6张图的时候又跳回第二张图
if (newLeft ==0) oImg.style.left = -2600 + "px" ;//当平移到第一张图的时候又跳回第五张图
flag = true
}
}
timer1 = setInterval(eachMove,eachTime);
}
每次点击左右两边按钮的时候就是往函数里传520跟-520,图片大小是就是520px.另外为了点击按钮使下面的圆点的样式变化跟图片保持一致,我们可以设置一个开关初始flag为true,点击后执行的时候变成false,等执行完毕再变成true。
// 每次清空下面圆点的样式,并且只保留点击的那个圆点样式
function changLi(j){
oUl.getElementsByClassName("act")[0].className = "";
oLi[j].className = "act";
}
for (let k = 0;k<oLi.length;k++){
oLi[k].onclick = function () {
if (flag ==false) return;
var num = k-index;
index = k;
changLi(index);
moveImg(-520*(num))
}
}
// 右边按钮
oBtn[1].onclick = function(){
if (flag ==false) return;
moveImg(-520);
if (index==4){
index = 0
}else {
index++;
}
changLi(index);
};
// 左边按钮
oBtn[0].onclick = function(){
if (flag ==false) return;
moveImg(520);
if (index ==0){
index = 4
} else {
index--;
}
changLi(index);
};
timer2 = setInterval(oBtn[1].onclick,800);
oBox.onmouseover = function(){
clearInterval(timer2)
};
oBox.onmouseout = function(){
timer2 = setInterval(oBtn[1].onclick,800);
};