WEB前端

jquery 图片连续向左滚动原理讲解(写出自己要的滚动效果)

位置:首页 > WEB前端 > jquery教程,2019-08-10 23:08
无缝连续滚动的实现原理,就是在现有显示图片的基础上克隆一份,并且拼接在显示图片的后面

jquery 图片连续向左滚动(图0)


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery 图片连续向左滚动原理讲解</title>
<style>
*{margin: 0; padding: 0;} 
   
img{ 
  border:0; 
} 
   
#container{ 
  width:800px; 
  height: 130px; 
margin:100px auto; 
  border:3px solid blue; 
  overflow: hidden; 
  position: relative; 
} 
   
#container ul{ 
  list-style: none; 
  width:10000px; 
  position: absolute; 
} 
   
#container ul li{ 
  float:left; 
  margin-right: 20px; 
}
#container ul li img{ 
  width:200px; 
}
</style>
</head>
<body> 
  <div id="container"> 
    <ul id="content"> 
      <li><a href="#"><img src="small4_15501107037104521.jpg"/></a></li> 
      <li><a href="#"><img src="small4_15501116496960737.jpg"/></a></li> 
      <li><a href="#"><img src="small4_15501158337520765.jpg"/></a></li> 
      <li><a href="#"><img src="small4_15501159337178953.jpg"/></a></li> 
      <li><a href="#"><img src="small4_15501161265781629.jpg"/></a></li> 
      <li><a href="#"><img src="small4_15501163177512113.jpg"/></a></li> 
      <li><a href="#"><img src="small4_15501163937854063.jpg"/></a></li> 
    </ul> 
  </div> 
  <script src="jquery.js" type="text/javascript"></script>
  <script type="text/javascript"> 
/* window.onload比 $(function(){}) 加载的更晚一些,这样那些宽度的计算在Chrome中就可以准确计算了*/  
  window.onload = function(){ 
   var speeds=20000;//越大滚动速度越慢
    /*计算一个segment的宽度*/ 
   
    var segmentWidth = 0; 
    $("#container #content li").each(function(){ 
      segmentWidth+= $(this).outerWidth(true); 
    }); 
   
    $("#container #content li").clone().appendTo($("#container #content")); 
   
    run(speeds); 
   
    function run(interval){ 
      $("#container #content").animate({"left":-segmentWidth}, interval,"linear",function(){ 
        $("#container #content").css("left",0); 
        run(interval); 
      }); 
    } 
   
    $("#container").mouseenter(function(){ 
      $("#container #content").stop(); 
    }).mouseleave(function(){ 
      var passedCourse = -parseInt($("#container #content").css("left")); 
      var time = speeds * (1 - passedCourse/segmentWidth); 
      run(time); 
    }); 
  }; 
       
</script>
</body>
以上就是jquery 图片连续向左滚动原理讲解。

原来讲解

一. id为container的div是最外层的包装,用来控制滚动区域显示的具体位置。
二. id为content的ul用来包装那些需要滚动的图片。

三. li元素就是用来包装具体的图片。

这里说明一点,css ul 的 width为什么设置为10000px。 因为无缝连续滚动的实现原理,就是在现有显示图片的基础上克隆一份,并且拼接在显示图片的后面,但由于显示图片的总宽度是未知的,所以为了安全性,最好将ul的width宽度设置比较大些。

四.js部分

1. 先通过each遍历所有的li元素,计算出它们宽度之和。
2. 拷贝一份图片到现有图片的后面,原理分析图的"图一"所示。

3. 设置6秒钟滚动完界面上面现有的图片,滚动完毕后,通过设置content的left值,将其整体拉回到初始状态,原理分析图的"图二"所示。然后递归调用run方法,完成无限滚动。

4. 当鼠标经过滚动区域的时候,动画立刻停止; 当鼠标离开的时候,动画继续执行。

TAGS:jquery 图片连续向左滚动

上编:jQuery删除li div等元素

下编:没有了

猜你喜欢

NewHot