图片轮播(首尾无缝+JS节流的应用)

来源：互联网发布：哈密顿回路算法广度编辑：程序博客网时间：2024/05/19 02:17

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

<!DOCTYPE html><html lang="en"><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 class="arrow" id="prev"><</div>        <div class="arrow" id="next">></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('container');    var list = document.getElementById('list');//获取图片容器    var prev = document.getElementById('prev');//向前按钮    var next = document.getElementById('next');//向后按钮    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标准参考教程和 mqyqing.fengJavaScript专题之跟着 underscore 学节流.Github

阅读全文

0 0