JavaScript定时器--图片轮播

最新推荐文章于 2022-07-22 02:15:46 发布

Tony L.Du

最新推荐文章于 2022-07-22 02:15:46 发布

阅读量4.2k

点赞数

分类专栏： HTML5 文章标签： javascript

本文链接：https://blog.csdn.net/Dextrad_ihacker/article/details/53287246

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果：
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>

Tony L.Du

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript定时器--图片轮播

效果： http://115.159.53.185/test/jsimagescroll/js： move() 利用定时器实现移动//要让哪一个元素运动//元素运动方向//从哪里运动到哪里//时间//调用：//move(document.getElementById("demo"), 'left', '300px', '100px', 2000);function move(ele,
复制链接

扫一扫

专栏目录