无缝滚动，走一个停一下

最新推荐文章于 2021-08-11 13:21:05 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2021-08-11 13:21:05 发布

阅读量372

点赞数

分类专栏： JavaScript积跬步至千里文章标签： javascript 图片轮播-无缝滚动

本文链接：https://blog.csdn.net/wstpa/article/details/45640553

版权

JavaScript积跬步至千里专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {margin: 0;padding:0;}
    #box {width: 800px;height: 200px;margin: 20px auto;position: relative;border: 1px solid #000;overflow: hidden;}
    #ul1 {list-style: none;height: 200px;position: absolute;}
    #ul1 li {width: 200px;height: 200px;float: left;}
    #box input {position: absolute;top: 50%}
    #leftBtn {left: 3px;}
    #rightBtn {right: 3px;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        var aLi=oUl.getElementsByTagName('li');
        var aInp=document.getElementsByTagName('input')
        oUl.innerHTML+=oUl.innerHTML;
        oUl.style.width=aLi.length*200+'px';
        var timer=null;
        var val=0;
        var bBtn=true;
        var iSpeed=-2;
        console.log(-oUl.offsetWidth/2)
        aInp[0].onclick=function(){
            iSpeed=-2;
            doMove();  //速度需要保持一致，不然出bug
        }
        aInp[1].onclick=function(){
            iSpeed=2;
            doMove()
        }
        doMove()
        function doMove(){

            clearInterval(timer);

            timer=setInterval(function(){
                var iCur=parseInt(getStyle(oUl,'left'));
                if(iSpeed<0){                                  //往左
                    val=Math.ceil(Math.abs(iCur)/200)*200;     //当icur=-380时，val=400；也就是-400时停一下
                    if (iCur == -val ) {
                        clearInterval(timer);
                        val=Math.abs(iCur)+200;                //更新val值
                        setTimeout(doMove,500);
                        //console.log(val+'^^^'+iCur)
                    };

                    if (iCur <= -oUl.offsetWidth/2) {         //拉回。
                        oUl.style.left=0;

                    }else{
                        oUl.style.left=iCur+iSpeed+'px';
                    };

                }else if (iSpeed>0) {                         //往右
                    val=Math.abs(iCur)-Math.abs(iCur%200);
                    if (iCur == -val ) {
                        clearInterval(timer);
                        val=Math.abs(iCur)-200;
                        setTimeout(doMove,500);
                        //console.log(val+'^^^'+iCur)
                    };
                    if (iCur == 0) {
                        oUl.style.left=-oUl.offsetWidth/2+'px';

                    }else{
                        oUl.style.left=iCur+iSpeed+'px';
                    };
                }
            },30)
        }

    }
    function getStyle(obj,attr){
        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr]
    }
    </script>
</head>
<body>
    <div id="box">
        <ul id="ul1">
            <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/7.jpg" /></li>
            <li><img src="img/8.jpg" /></li>
        </ul>
        <input type="button" value="←" id="leftBtn"> 
        <input type="button" value="→" id="rightBtn"> 
    </div>
</body>
</html>

见面时的呼吸都曾反复练习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无缝滚动，走一个停一下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding:0;} #box {width: 800px;height: 200px;margin: 20px
复制链接

扫一扫