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

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><body><div id="container"><ul id="content"><li><a href="#"><imgsrc="https://img2.baidu.com/it/u=2927586094,212838758&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" /></a></li><li><a href="#"><imgsrc="https://img2.baidu.com/it/u=712694738,3554631191&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=353" /></a>3</li><li><a href="#"><imgsrc="https://img2.baidu.com/it/u=2318304628,3725588736&fm=253&fmt=auto&app=120&f=JPEG?w=787&h=500" /></a>4</li><li><a href="#"><imgsrc="https://img2.baidu.com/it/u=1686691636,3058220847&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" /></a>6</li><li><a href="#"><imgsrc="https://img0.baidu.com/it/u=3325784342,2976910751&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" /></a>5</li><li><a href="#"><imgsrc="https://img2.baidu.com/it/u=377961337,1258578817&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" /></a>5</li><li><a href="#"><imgsrc="https://img2.baidu.com/it/u=4260665178,1669850930&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" /></a>4</li></ul></div></body>
</body>
<style>* {margin: 0;padding: 0;}img {border: 0;}#container {width: 800px;height: 130px;border: 3px solid blue;overflow: hidden;position: relative;}#container ul {list-style: none;width: 10000px;position: absolute;}#container ul li {width: 120px;height: 130px;float: left;margin-right: 10px;}img {width: 120px;height: 130px;}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>/* 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(10000);function run(interval) {$("#container #content").animate({ "left": -segmentWidth }, interval, "linear", function () {$("#container #content").css("left", 0);run(10000);});}$("#container").mouseenter(function () {$("#container #content").stop();}).mouseleave(function () {var passedCourse = -parseInt($("#container #content").css("left"));var time = 10000 * (1 - passedCourse / segmentWidth);run(time);});};</script></script></html>

无缝连续滚动原理分析

先通过each遍历所有的li元素，计算出它们宽度之和。
拷贝一份图片到现有图片的后面，原理分析图的"图一"所示。
设置6秒钟滚动完界面上面现有的图片，滚动完毕后，通过设置content的left值，将其整体拉回到初始状态，原理分析图的"图二"所示。然后递归调用run方法，完成无限滚动。
当鼠标经过滚动区域的时候，动画立刻停止; 当鼠标离开的时候，动画继续执行。

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

jQuery动画实现图片无缝连续自动滚动相关推荐

html的动画效果实现无限轮播,jQuery动画效果实现图片无缝连续滚动
本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下效果图如下: 一.HTML代码 1. id为container的div是最外层的包装,用来控制滚动 ...
02-走马灯动画实现图片无缝展示
一:目标实现走马灯效果,图片无缝衔接播放二:实现思路 1.先写好个盒子,宽高边框(注意这里的盒子宽不能乱写,要刚好能放下整数张图片) 2.ul>li>a添加图片,再浮动.微调使图片排成 ...
JQuery控制图片无缝滚动
经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html> ...
WEB 门户网站开发常用UI 之图片无缝滚动
向左侧滚动相关CSS #photo-list {width: 998px;height: 172px;overflow: hidden;}#photo-list ul {margin: 0px;pa ...
jQuery在asp.net中实现图片自动滚动
时间真快,不知不觉12月已经过了一半了,新的一年即将到来.有段时间没写东西了,技术这东东天天都在更新,天天都是一个新面孔,如果不坚持学习肯定就会落在队尾.要想跟上队伍,需要每天都要学习,但是学习的只是 ...
html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
html 多张图片自动滚动,JS实现图片的不间断连续滚动的简单实例
js替代marquee实现图片无缝滚动可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. ...
dw自动滚动图片_DW图片无缝滚动代码
DIV 的图片无缝滚动 , DIV 图片上无缝滚动 , DIV 图片下无缝滚动 , DIV 图片左无缝滚动 , DIV 图片右无缝滚动 1. 先了解一下对象的几个的属性: innerHTML: 设置或 ...
JavaScript----marquee滚动标签图片无缝滚动插入百度地图
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

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

jQuery动画实现图片无缝连续自动滚动相关推荐

最新文章

热门文章