Maison > Article > interface Web > Méthode native JS pour obtenir un carrousel fluide au début et à la fin des images

Méthode native JS pour obtenir un carrousel fluide au début et à la fin des images

一个新手original: 2017-10-17 09:39:591320parcourir

首先给出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>

接下来给出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;
}

在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);
    };

    
};

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

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment comprendre le cross-domain JsArticle suivant：Comment comprendre le cross-domain Js

Articles Liés

Voir plus