Rumah >hujung hadapan web >tutorial js >JS原生方法实现图片首尾平滑轮播

JS原生方法实现图片首尾平滑轮播

一个新手asal: 2017-10-17 09:39:591385semak imbas

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

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

Atas ialah kandungan terperinci JS原生方法实现图片首尾平滑轮播. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：如何理解Js跨域Artikel seterusnya：Angular获取项目中定义的json文件

Artikel berkaitan

Lihat lagi