Heim > Artikel > Web-Frontend > JS-native Methode zur Erzielung eines reibungslosen Karussells am Anfang und Ende von Bildern

JS-native Methode zur Erzielung eines reibungslosen Karussells am Anfang und Ende von Bildern

一个新手Original: 2017-10-17 09:39:591347Durchsuche

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

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

Das obige ist der detaillierte Inhalt vonJS-native Methode zur Erzielung eines reibungslosen Karussells am Anfang und Ende von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie man Js domänenübergreifend verstehtNächster Artikel：Wie man Js domänenübergreifend versteht

In Verbindung stehende Artikel

Mehr sehen