无缝滚动图片

最新推荐文章于 2016-08-07 21:01:05 发布

tianshizhimeng155

最新推荐文章于 2016-08-07 21:01:05 发布

阅读量418

点赞数

分类专栏： Web前端 javascript

本文链接：https://blog.csdn.net/u013267266/article/details/51026416

版权

Web前端同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        *{
            margin:0px;
            padding:0px;
        }
        #wrapper{
            width:900px;
            height:150px;
            background:green;
            position:relative;
            margin:100px auto;
             overflow:hidden;
        }
          #btn-left{
            display:block;
            width:68px;
            height:68px;
            background:url(images/btn.jpg) no-repeat -70px 0px;
            position:absolute;
            top:41px;
            left:8px;
        }
         #btn-left:hover{
           
            background:url(images/btn.jpg) no-repeat -70px -70px;
            
        }
          #btn-right{
            display:block;
            width:68px;
            height:68px;
            background:url(images/btn.jpg) no-repeat 0px 0px;
             position:absolute;
            top:41px;
            right:8px;
        }
         #btn-right:hover{
             background:url(images/btn.jpg) no-repeat 0px -70px;
         }
         #wrapper #div1{
            width:712px;
            height:108px;
           <span style="color:#ff0000;"> position:relative;</span>
            margin:20px auto;
            background:blue;
           <span style="color:#ff0000;"> overflow:hidden;</span>
         }
           #div1 ul{
           
          <span style="color:#ff0000;"> position:absolute;</span>
           top:0;
           left:0;
           
          }
           #div1 ul li{
            width:178px;
            height:108px;
            float:left;
             list-style: none;
          }

        </style>
        <script>
        //1.写样式时设DIV1为relative,ul为absolute 设置定时器才能运动起来
        //2.左右按钮向左向右运动，实际是控制速度，为正，向右，为负，向左，但需要先判断速度为正还是负，决定
        //3.鼠标移上停止，就是关闭定时器，移开，就是开定时器
        window.οnlοad=function(){
            var oWrap=document.getElementById('wrapper');
            var oBtnleft=document.getElementById('btn-left');
            var oBtnright=document.getElementById('btn-right');
            var oDiv1=document.getElementById('div1');
            var oUl=oDiv1.getElementsByTagName('ul')[0];
            var oLi=oUl.getElementsByTagName('li');
         <span style="color:#ff0000;">   oUl.innerHTML+=oUl.innerHTML;</span>
            oUl.style.width=oLi[0].offsetWidth*(oLi.length)+"px";

            var timer=null;
             var speed=2;
             oBtnright.οnclick=function()
             {
               <span style="color:#ff0000;"> if(speed<0)
                {
                    speed=-speed;
                }
                else
                {
                    speed=speed;
                }</span>
             }
             oBtnleft.οnclick=function()
             {
                if(speed>0)
                {
                    speed=-speed;
                }
                else
                {
                    speed=speed;
                }
             }
           
            function move()
            {
          <span style="color:#ff0000;">      
           if(oUl.offsetLeft<-oUl.offsetWidth/2)
            {
                oUl.style.left=0;
            }
            if(oUl.offsetLeft>0)
            {
                oUl.style.left=-oUl.offsetWidth/2+'px';
            }</span>
              
              oUl.style.left=oUl.offsetLeft+speed+'px';
              console.log(parseInt(oUl.style.left));
          
            }
            var timer=null;
       timer= setInterval(move, 50);
       oUl.οnmοuseοver=function(){
        clearInterval(timer);
       }
       oUl.οnmοuseοut=function()
       {
         timer= setInterval(move, 50);
       }
     }
        </script>
    </head>
    <body>
    <div id="wrapper">
        <a href="javascript:;" id="btn-left"></a>
        <a href="javascript:;" id="btn-right"></a>
        <div id="div1">
            <ul>
                <li><img src="images/1.jpg"/></li>
                  <li><img src="images/2.jpg"/></li>
                  <li><img src="images/3.jpg"/></li>
                  <li><img src="images/4.jpg"/></li>
            </ul>
        </div>
    </div>
    </body>
</html>

//1.写样式时设DIV1为relative,ul为absolute 设置定时器才能运动起来
//2.左右按钮向左向右运动，实际是控制速度，为正，向右，为负，向左，但需要先判断速度为正还是负，决定

//3.鼠标移上停止，就是关闭定时器，移开，就是开定时器

4.//两个ul合着滚动，当滚动到一半时再倒退到原始，实现无缝滚动的效果