JavaScript定时器--图片轮播

来源：互联网发布：手机壁纸主题软件编辑：程序博客网时间：2024/06/06 19:00

效果：
http://115.159.53.185/test/jsimagescroll/

js：
move() 利用定时器实现移动

//要让哪一个元素运动//元素运动方向//从哪里运动到哪里//时间//调用：//move(document.getElementById("demo"), 'left', '300px', '100px', 2000);function move(ele, dir, fromVal, toVal, dur, callBack){    var moveCount = dur / 10;    var oldPos;    var speed;    var offset;//  console.log(toVal.split('px')[0]);    switch(dir){        case "left" :            offset = "offsetLeft";            ele.style.left = fromVal;            oldPos = ele.offsetLeft;             speed = (toVal.split('px')[0] - oldPos) / moveCount;            console.log(speed);            break;        case "top":            offset = "offsetTop";            ele.style.top = fromVal;            oldPos = ele.offsetTop;             speed = (toVal.split('px')[0] - oldPos) / moveCount;            break;        default:            console.log("u can only use 'top' or 'left' in this function");            return;    }    console.log(ele[offset]);    var timer = setInterval(function(){        ele.style[dir] = ele[offset] + speed + 'px';//      ele.style.left;//      ele.style.top;        moveCount--;        if(moveCount <= 0){            callBack && callBack();            clearInterval(timer);        }           }, 10);}

html：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        #imagebox{            width: 400px;            height: 200px;            margin: 100px auto;            position: relative;            overflow: hidden;        }        #images{            width: 100%;            height: 100%;            position: relative;            list-style: none;        }        #images li{            width: 100%;            height: 100%;            position: absolute;            left: -100%;        }        #images li:first-child{            left: 0;        }        #images li img{            height: 100%;            width: 100%;        }        #points{            position: absolute;            height: 20px;            bottom: 10px;            list-style: none;        }        #points li{            width: 10px;            height: 10px;            border-radius: 5px;            margin: 5px;            background: white;            float: left;        }        #points li:first-child{            background: cadetblue;        }        #direction li{            width: 10px;            height: 10px;            border-radius: 5px;            margin: 5px;            background: red;        }    </style>    <body>        <div id="imagebox">            <ul id="images">                <li><img src="img/1.jpg"/></li>                <li><img src="img/2.jpg"/></li>                <li><img src="img/3.jpg"/></li>                <li><img src="img/4.jpg"/></li>                <li><img src="img/5.jpg"/></li>                <li><img src="img/6.jpg"/></li>            </ul>            <ul id="direction">                <li id="leftDir"></li>                <li id="rightDir"></li>            </ul>            <ul id="points">                            </ul>        </div>        <script src="js/move.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            var lis = document.getElementById("images").getElementsByTagName("li");            var pointBox = document.getElementById("points");            var points = [];            pointBox.style.width = 20*lis.length + 'px';            pointBox.style.left = (400-20*lis.length) * 0.5 +  "px"            for(var i = 0; i < lis.length; i++){                var li = document.createElement("li");                points.push(li);                pointBox.appendChild(li);                li.index = i;                //点击立刻翻页                li.onclick = function(){//                  console.log(this.index);                    if(this.index > nowIndex ){                        clearInterval(timer);                        nextImage(this.index);                                          conTinuePlay();                    }                                           if(this.index < nowIndex ){                                         clearInterval(timer);                        jumpBack(this.index);                        conTinuePlay();                    }                }            }            //自动滚动            var nowIndex = 0;            var count = lis.length;                     var timer = setInterval(function(){                var nextIndex = nowIndex + 1 >= count ? 0:nowIndex+1;                nextImage(nextIndex);                       }, 2000);            function setContinuePlay(){                timer = setInterval(function(){                    var nextIndex = nowIndex + 1 >= count ? 0:nowIndex+1;                    nextImage(nextIndex);                           }, 2000);            }            function conTinuePlay(){                setTimeout(setContinuePlay(), 5000);                            }            function nextImage(nextIndex){                //当前图片向左400px                move(lis[nowIndex],'left', '0px', '-400px', 300);                //下一张图片向左400px                move(lis[nextIndex],'left', '400px', '0px', 300);                //小点点：颜色切换                points[nowIndex].style.background = 'white';                points[nextIndex].style.background = 'cadetblue';                //自增                nowIndex = nextIndex;                               }            function jumpBack(jumpToIndex){                //当前图片向左400px                move(lis[nowIndex],"left", '0px', '400px', 300);                //下一张图片向左400px                move(lis[jumpToIndex],'left', '-400px', '0px', 300);                //小点点：颜色切换                points[nowIndex].style.background = 'white';                points[jumpToIndex].style.background = 'cadetblue';                //自增                nowIndex = jumpToIndex;                             }        </script>    </body></html>

0 0