脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery图片无缝连续滚动

jQuery动画效果实现图片无缝连续滚动

 更新时间：2021年06月09日 11:59:07   作者：秋恨雪  
这篇文章主要为大家介绍了jQuery动画效果实现图片无缝连续滚动，实现类似连续不间断的滚动广告位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码，分享给大家供大家参考，具体内容如下

效果图如下：

一、HTML代码

<body> 
  <div id="container"> 
    <ul id="content"> 
      <li><a href="#"><img src="images/0.png"/></a></li> 
      <li><a href="#"><img src="images/1.png"/></a></li> 
      <li><a href="#"><img src="images/tewu.png"/></a></li> 
      <li><a href="#"><img src="images/2.png"/></a></li> 
      <li><a href="#"><img src="images/tewu.png"/></a></li> 
      <li><a href="#"><img src="images/3.png"/></a></li> 
      <li><a href="#"><img src="images/4.png"/></a></li> 
    </ul> 
  </div> 
</body>

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

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

二、CSS代码

*{margin: 0; padding: 0;} 
 
img{ 
  border:0; 
} 
 
#container{ 
  width:800px; 
  height: 130px; 
<span style="white-space:pre">  </span>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; 
}

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

三、无缝连续滚动原理分析

四、JQuery实现代码

<script type="text/javascript"> 
/* window.onload比 $(function(){}) 加载的更晚一些，这样那些宽度的计算在Chrome中就可以准确计算了*/  
  window.onload = function(){ 
 
    /*计算一个segment的宽度*/ 
 
    var segmentWidth = 0; 
    $("#container #content li").each(function(){ 
      segmentWidth+= $(this).outerWidth(true); 
    }); 
 
    $("#container #content li").clone().appendTo($("#container #content")); 
 
    run(6000); 
 
    function run(interval){ 
      $("#container #content").animate({"left":-segmentWidth}, interval,"linear",function(){ 
        $("#container #content").css("left",0); 
        run(6000); 
      }); 
    } 
 
    $("#container").mouseenter(function(){ 
      $("#container #content").stop(); 
    }).mouseleave(function(){ 
      var passedCourse = -parseInt($("#container #content").css("left")); 
      var time = 6000 * (1 - passedCourse/segmentWidth); 
      run(time); 
    }); 
  }; 
     
</script>

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

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

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

关于动画继续执行的代码，如下图分析：

以上就是jQuery实现图片无缝连续滚动的代码，希望对大家的学习有所帮助。

您可能感兴趣的文章:

相关文章

  • jQuery中live()方法用法实例

    jQuery中live()方法用法实例

    这篇文章主要介绍了jQuery中live()方法用法,实例分析了live()方法的功能、定义及为匹配元素添加一个或多个事件,并规定当这些事件发生时运行函数的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jquery写出PC端轮播图实例

    jquery写出PC端轮播图实例

    本篇文章主要给大家讲述了用jquery如何写出一个PC端的轮播图效果的实例，有兴趣的朋友参考下。
    2018-01-01
  • jquery实现可自动判断位置的弹出层效果代码

    jquery实现可自动判断位置的弹出层效果代码

    这篇文章主要介绍了jquery实现可自动判断位置的弹出层效果代码,可实现根据鼠标位置进行合理的判断并显示弹出层的功能,涉及jQuery鼠标事件及页面元素位置属性的相关判定技巧,需要的朋友可以参考下
    2015-10-10
  • jquery实现图片跟随鼠标的实例

    jquery实现图片跟随鼠标的实例

    这篇文章主要介绍了 jquery实现图片跟随鼠标的实例的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下
    2017-10-10
  • 又一枚精彩的弹幕效果jQuery实现

    又一枚精彩的弹幕效果jQuery实现

    精彩的弹幕效果分享给大家，具有一定的参考价值，感兴趣的朋友可以尝试制作弹幕，具体内容如下
    2016-07-07
  • jQuery性能优化28条建议你值得借鉴

    jQuery性能优化28条建议你值得借鉴

    一直在寻找有关jQuery性能优化方面的小窍门，能让我那臃肿的动态网页应用变得轻便些，我决定将最好最常用的一些优化性能的建议列出来,感兴趣的你可不要错过了哈，或许本文所提供的建议对你有所帮助
    2013-02-02
  • jquery实现在光标位置插入内容的方法

    jquery实现在光标位置插入内容的方法

    这篇文章主要介绍了jquery实现在光标位置插入内容的方法,涉及jQuery功能的扩展技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JQuery和PHP结合实现动态进度条上传显示

    JQuery和PHP结合实现动态进度条上传显示

    本文给大家介绍JQuery和PHP结合实现动态进度条上传显示功能，本文分步骤给大家介绍的非常详细，感兴趣的朋友一起看看吧
    2016-11-11
  • 针对后台列表table拖拽比较实用的jquery拖动排序

    针对后台列表table拖拽比较实用的jquery拖动排序

    这篇文章主要为大家详细介绍了比较实用的jquery拖动排序,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JQuery插件iScroll实现下拉刷新，滚动翻页特效

    JQuery插件iScroll实现下拉刷新，滚动翻页特效

    下拉自动加载进行分页的运用越来越多，比起传统的分页该方法分页用户体验更好，布局也更简单了。目前正在使用和学习中……
    2014-06-06

最新评论