无缝滚动（运动框架的灵活运用）

最新推荐文章于 2019-07-29 09:25:15 发布

大海和云朵

最新推荐文章于 2019-07-29 09:25:15 发布

阅读量237

点赞数

分类专栏： JS小作品

本文链接：https://blog.csdn.net/qq_29592901/article/details/52300626

版权

JS小作品专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、清空默认样式：*{margin:0;padding:0;}

2、当想不到更好的方法时就接受用当前想到的较可行的方法。

3、解决几个问题：（1）保持页面性能的前提下，让图片首尾相接。解决办法：复制一份图片（2）宽度不够出现折行，解决办法：oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';(3)当走完第2份图片时，出现空白。解决办法：当出现从首到尾完整一套图片（即走到一半）时，拉回到起始位置。

4、去除a标签下划线：text-decoration:none;

5、png、gif支持透明，jpg不支持透明。具体区别请自行百度，这里不进行赘述。

全部源代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        #div1{position: relative;border:1px solid #000000;
            width:560px;height:180px;margin:10px auto;overflow: hidden;}
        #ul1{position:absolute;left:0;}
        #ul1 li{list-style: none;float:left;width:120px;height:160px;
                padding:10px;}
        #ul1 li img{width:120px;height:160px;}
        a{text-decoration:none;position:absolute;
            width:100px;height:100px;background:#000000;top:40px;
            filter:alpha(opacity:50);opacity:0.5;
         }
        #a1{left:10px;filter:alpha(opacity:0);opacity:0;}
        #a2{right:10px;filter:alpha(opacity:0);opacity:0;}
    </style>
    <script src="move+1.js"></script>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var oUl1=document.getElementById('ul1');
            var aLi=oUl1.getElementsByTagName('li');
            var aA=document.getElementsByTagName('a');
            var timer=null;
            var iSpeed=-4;
            oUl1.innerHTML+=oUl1.innerHTML;
            oUl1.style.width=aLi.length*aLi[0].offsetWidth+'px';
            function fnMove(){
                if(oUl1.offsetLeft<-oUl1.offsetWidth/2){
                    oUl1.style.left=0;
                }
                else if(oUl1.offsetLeft>0){
                    oUl1.style.left=-oUl1.offsetWidth/2+'px';
                }
                oUl1.style.left=oUl1.offsetLeft+iSpeed+'px';
            }
            timer=setInterval(fnMove,30);
            aA[0].onmouseover=function(){
                startMove(this,{opacity:30});
            };
            aA[0].onmouseout=function(){
                startMove(this,{opacity:0});
            };
            aA[1].onmouseover=function(){
                startMove(this,{opacity:30});
            };
            aA[1].onmouseout=function(){
                startMove(this,{opacity:0});
            };
            aA[0].onclick=function(){

                iSpeed=-4;
            };
            aA[1].onclick=function(){
                iSpeed=4;
            };
            oDiv.onmouseover=function(){
                clearInterval(timer)
            };
            oDiv.onmouseout=function(){
                timer=setInterval(fnMove,30)
            }
        }
    </script>
</head>
<body>
<div id="div1">
    <ul id="ul1">
        <li><img src="img/1.jpg"/></li>
        <li><img src="img/22.jpg"/></li>
        <li><img src="img/222.jpg"/></li>
        <li><img src="img/2222.jpg"/></li>
    </ul>
    <a id="a1" href="#"><img src="img/left.png"/><-</a>
    <a id="a2" href="#"><img src="img/right.jpg"/></a>
</div>
</body>
</html>

大海和云朵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
无缝滚动（运动框架的灵活运用）

1、清空默认样式：*{margin:0;padding:0;}2、当想不到更好的方法时就接受用当前想到的较可行的方法。3、解决几个问题：（1）保持页面性能的前提下，让图片首尾相接。解决办法：复制一份图片（2）宽度不够出现折行，解决办法：oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';(3)当走完第2份图片时，出现空白。解决办法：当出现从
复制链接

扫一扫

专栏目录