淘宝经典移动轮播制作

看了看记录,发现上次发表文章时间竟然是去年的时候了,有点小尴尬,每次都有一种发表文章的冲动,但懒汉加成,又让我望而止步。这几天刚好用原生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);
};
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章