函数功能会如ul的left以一个恰好速度往右侧跑动。移动”函数。

 

原理:

原理:

1.吃ul一个万万定位要该剥离文档流,left设置为0,把图纸塞进ul里,编写一个“移动”函数,函数功能会使ul的left以一个正要速度为右侧走动,

1.让ul一个万万定位,left设置为0,把图片塞进ul里,编写一个“move”函数,函数功能会如ul的left以一个刚刚速度向右侧走动,

2.安一个定时器,让”移动”函数每30(参数可更换)毫秒执行同一差

2.装置一个定时器,让”move”函数每30(参数可换)毫秒尽同样浅

3.坐ul的尺寸会“跑”完,此时得以要ul的content也就算是img增加一倍,

3.为ul的长会“跑”完,此时可要ul的content也即是img量增加一倍,

oUl.innerHTML +=oUl.innerHTML;
oUl.innerHTML += oUl.innerHTML;

4.这因ul的content增加,其width也会见趁着增大,根据实际项目显示图片数或移或不显,

 

oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';

4.这因为ul的content增加,其width也会趁着增大,根据实际项目展示图片数可能改或非醒目,

5.往“移动”函数里增添代码。

oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';

5.1此时ul向右侧走,判断当ul的offsetLeft>0时,把ul向左拉“一半ul的升幅”,也就算是要是ul能够为右侧一直任界定活动

 

if(oUl.offsetLeft>0){
     oUl.style.left = -oUl.offsetWidth/2+'px';
}

5.往“move”函数里增添代码。

5.2当ul向左移动,其offsetLeft跑了ul一半的宽时,把整个ul拉掉至初始的left:0;

5.1**此时ul向右侧走,判断当ul的offsetLeft>0时,把ul向左拉“一半ul的增长率”,也就是要ul能够向右侧一直任界定滚动**

if (oUl.offsetLeft<-oUl.offsetWidth/2) {
      oUl.style.left = 0; 
}

 

上代码:

if(oUl.offsetLeft>0){
         oUl.style.left = -oUl.offsetWidth/2+'px';
}

html:

 

<div id="box">
    <ul>
      <li><a href="#"><img src="1.jpg" /></a></li>
      <li><a href="#"><img src="2.jpg" /></a></li>
      <li><a href="#"><img src="3.jpg" /></a></li>
      <li><a href="#"><img src="4.jpg" /></a></li>
    </ul>
 </div>

5.2**当ul向左滚动,其offsetLeft跑了ul一半的肥瘦时,把所有ul拉掉至初始的left:0;**

css:

if (oUl.offsetLeft<-oUl.offsetWidth/2) {
            oUl.style.left = 0; 
}
* {margin: 0;padding: 0;}
   #box{ width: 480px; height: 110px; border: 1px red solid; margin: 100px auto;overflow: hidden; position: relative; }
   #box ul{ position: absolute; left: 0; top: 5px;}
   #box ul li{list-style: none; float: left; width: 100px; height: 100px; padding-left: 16px; }
   #box ul li img{width: 100px; height: 100px;}

 

js:

 

<script>
         window.onload = function(){
             var oDiv = document.getElementById('div1');
             var oUl = oDiv.getElementsByTagName('ul')[0];
             var oLi = oUl.getElementsByTagName('li');
             var aA = document.getElementsByTagName('a');
             var iSpeed = 10;      //让ul开始就具有一个速度走动  

              oUl.innerHTML +=oUl.innerHTML;  
              oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';  
                aA[0].onclick = function(){
                      iSpeed = -10;
               };
                aA[1].onclick = function(){
                      iSpeed = 10;
               };

               function fnMove(){
                   if (oUl.offsetLeft<-oUl.offsetWidth/2) {   //负数是因为ul的left是负数  
                           oUl.style.left = 0;
                       }

                   else if(oUl.offsetLeft>0){
                         oUl.style.left = -oUl.offsetWidth/2+'px';     
                      }                

                     oUl.style.left = oUl.offsetLeft+iSpeed+'px';    //整个ul向右移动      

               };

                 var timer = null;             
                 clearInterval(timer);
                 timer = setInterval(fnMove,30);

                 oUl.onmouseover = function(){
                    clearInterval(timer);
                 };
                 oUl.onmouseout = function(){
                    timer = setInterval(fnMove,30); //当鼠标移开的时候执行这个定时器

                 };

         };
      </script>

上代码:

假使有不当,欢迎指正。

html:

以上这篇无缝滚动的简约实现代码(推荐)就是多少编分享给大家之全部内容了,希望能为大家一个参照,也可望大家多多支持脚本的家。

 <div id="box">
        <ul>
            <li><a href="#"><img src="1.jpg" /></a></li>
            <li><a href="#"><img src="2.jpg" /></a></li>
            <li><a href="#"><img src="3.jpg" /></a></li>
            <li><a href="#"><img src="4.jpg" /></a></li>
        </ul>
 </div>

你或许感兴趣之稿子:

  • 基于JS实现无缝滚动思路与代码分享
  • js实现可决定左右方向的无缝滚动效应
  • JS平滑无缝滚动效应的实现代码
  • javascript兑现平滑无缝滚动
  • JavaScript中落实无缝滚动、分享至侧边栏实例代码

 

css:

     * {margin: 0;padding: 0;}
     #box{ width: 480px; height: 110px; border: 1px red solid; margin: 100px auto;overflow: hidden; position: relative; }
     #box ul{ position: absolute; left: 0; top: 5px;}
     #box ul li{list-style: none; float: left; width: 100px; height: 100px; padding-left: 16px; }
     #box ul li img{width: 100px; height: 100px;}

 

js:

<script>
                  window.onload = function(){
                          var oDiv = document.getElementById('div1');
                          var oUl = oDiv.getElementsByTagName('ul')[0];
                          var oLi = oUl.getElementsByTagName('li');
                          var aA = document.getElementsByTagName('a');
                          var iSpeed = 10;            //让ul开始就具有一个速度走动    

                           oUl.innerHTML +=oUl.innerHTML;    
                           oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';   
                                aA[0].onclick = function(){
                                            iSpeed = -10;
                              };
                               aA[1].onclick = function(){
                                            iSpeed = 10;
                              };

                              function Move(){
                                      if (oUl.offsetLeft<-oUl.offsetWidth/2) {     //负数是因为ul的left是负数    
                                                oUl.style.left = 0;
                                             }

                                     else if(oUl.offsetLeft>0){
                                                 oUl.style.left = -oUl.offsetWidth/2+'px';          
                                            }                                

                                         oUl.style.left = oUl.offsetLeft+iSpeed+'px';        //整个ul向右移动            

                              };

                                  var timer = null;                          
                                  clearInterval(timer);
                                  timer = setInterval(Move,30);

                                  oUl.onmouseover = function(){
                                       clearInterval(timer);
                                  };
                                  oUl.onmouseout = function(){
                                       timer = setInterval(Move,30);  //当鼠标移开的时候执行这个定时器

                                  };

                  };
           </script>

 如发生不当,欢迎指正。

相关文章