JS native method to achieve smooth carousel at the beginning and end of images-JS Tutorial-php.cn

JS native method to achieve smooth carousel at the beginning and end of images

一个新手

Release： 2017-10-17 09:39:59

Original

1367 people have browsed it

首先给出HTML代码，要注意轮播图片表(#list)末尾加上第一个图片1.jpg，在首部加上最后一个图片5.jpg。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首尾轮播</title>
    <link rel="stylesheet" href="首尾轮播.css">
<script src="首尾轮播.js"></script>
</head>
<body>
    <div id="container">
        <div id="list" style="left: -500px">
            <div><a href="#"><img src="../imgs/5.jpg" alt=""></a></div>
            <div><a href="#"><img src="../imgs/1.jpg" alt=""></a></div>
            <div><a href="#"><img src="../imgs/2.jpg" alt=""></a></div>
            <div><a href="#"><img src="../imgs/3.jpg" alt=""></a></div>
            <div><a href="#"><img src="../imgs/4.jpg" alt=""></a></div>
            <div><a href="#"><img src="../imgs/5.jpg" alt=""></a></div>
            <div><a href="#"><img src="../imgs/1.jpg" alt=""></a></div>
        </div>

        <div id="prev">&lt;</div>
        <div id="next">&gt;</div>


    </div>        

</body>    

</html>

Copy after login

接下来给出css和js代码，大家可以酌情根据图片的大小、数量、宽度，调整container、list的参数，这也是封装JS所要考虑的参数。

*{
    margin: 0;
    padding: 0;
}

#container{
    height: 400px;
    width:  500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
}

#list>div {
    float: left;
}
#list{
    position: absolute; 
    height: 400px;
    width:  3600px;
    
}

#list img{
    height: 400px;
    width:  500px;
}
.arrow {
    user-select:none;
    position: absolute;
    top:150px;
    z-index: 2;
    background-color: #aaa;
    height: 100px;
    width:  80px;
    cursor: pointer;
    opacity: 0.5;
    display: none;
    line-height: 100px;
    text-align: center;
    color: #222;
    font-size: 3em;

}
#container:hover .arrow{
    display: block;
}
 #prev{
    left:20px;
}

 #next{
    right: 20px;
}

Copy after login

在JS中，我们可以通过改变speed变量来控制图片切换的速度....这里用的是 element.style.transition来控制的过渡效果.

window.onload=function(){
    var container = document.getElementById(&#39;container&#39;);
    var list = document.getElementById(&#39;list&#39;);//获取图片容器
    var prev = document.getElementById(&#39;prev&#39;);//向前按钮
    var next = document.getElementById(&#39;next&#39;);//向后按钮
    var nowP = 1;    //显示位置
    var judge = null;    //执行权
    var speed = 0.1; // 切换速度  秒
    prev.onclick=function(){
        if(!judge){
             judge = setTimeout(function(){
                 if(nowP==1){setTimeout(function(){
                     list.style.transition="left 0s";
                    list.style.left = "-2500px";　
                    nowP = 5;},speed*1000);} //当到达图片表左边缘时与动画同步切换 
                 list.style.transition = "left "+speed+"s";
                move(500);
                nowP--;
                judge = null;
            },speed*1000);
        }
    };
    next.onclick=function(){
        if(!judge){             
             judge = setTimeout(function(){
                 if(nowP==5){setTimeout(function(){
                     list.style.transition="left 0s";
                    list.style.left = "-500px"; 
                    nowP = 1;},speed*1000);} //当到达图片表右边缘时与动画同步切换 
                list.style.transition = "left "+speed+"s";
                move(-500);
                nowP++;
                judge = null;
            },speed*1000);
        }

    };

    function move(num){
        var term = parseInt(list.style.left) + num ; 
        list.style.left = term+"px";
    }

    var roll= setInterval(function(){
        next.onclick();
    },2000);

    container.onmouseenter=function(){
        clearInterval(roll);
    };

    container.onmouseleave=function()
        {
        roll=setInterval(function(){
        next.onclick();
        },2000);
    };

    
};

Copy after login

下面是一个演示demo，简单来说原理就是在切换到图片表首和表尾的动画开始时，设置一个延迟执行时间与动画过渡时间相同的setTimeout函数来执行瞬间切换，再通过节流来保证最大的切换速度(speed)。

节流的原理我是参考的以下两位元老的文章：

阮一峰Javascript标准参考教程(事件类型scroll事件小结)
mqyqing.fengJavaScript专题之跟着 underscore 学节流.Github

本人也是初学前端，如果有帮助的话，点一下推荐吧

The above is the detailed content of JS native method to achieve smooth carousel at the beginning and end of images. For more information, please follow other related articles on the PHP Chinese website!