jQuery使用数组编写图片无缝向左滚动

jQuery编程实现一组由8幅图组成的图片，进入网页初始时显示前面4张，然后自动向左滚动，直到屏幕显示的是后4张时停止滚动。
下面是jQuery代码：


代码如下:

$(document).ready(function() {
var $images = $('#images img');
var imgs = $images.length;
var next_img;
for(var i=0;i<imgs;i++) {
next_img=$images.eq(i);
scroll(next_img);
}
});
//创建一个滚动的函数，使用animate函数自定义动画
function scroll(image) {
image.animate({'left':-485},5000);
};
</script>

赞 (0)

相关推荐

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

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

    本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 <body> <div id="container"> <ul id="content"> <li><a href="#"><img src="images/0.png"/></a></li> <

  • Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码

    Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码

    首先是Jquery 无标题文档 $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#con ul"); var liHeight = $ul.find("li:last").height(); $ul.animate({

  • 基于jQuery的图片左右无缝滚动插件

    在线演示:http://demo.jb51.net/js/2012/myslideLeftRight/打包下载:http://www.jb51.net/jiaoben/44973.html核心代码: 复制代码 代码如下: (function($){ $.fn.extend({ "slidelf":function(value){ value = $.extend({ "prev":"", "next":""

  • 基于jQuery的上下无缝滚动应用(单行或多行)

    核心jQuery代码: 复制代码 代码如下: $(function(){ var _wrap=$('ul.line');//定义滚动区域 var _interval=2000;//定义滚动间隙时间 var _moving;//需要清除的动画 _wrap.hover(function(){ clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动 },function(){ _moving=setInterval(function(){ var _field=_wrap.f

  • jcarousellite.js 基于Jquery的图片无缝滚动插件

    1.引入JS库,jquery.js脚本和插件脚本jcarousellite.js. 复制代码 代码如下: <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jcarousellite.js"></script> 2

  • jquery无缝向上滚动实现代码

    JS部份 复制代码 代码如下: $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(function(){ clearInterval(scrollTimer); },function(){ scrollTimer = setInterval(function(){ scrollNews( $this ); }, 2000 ); }).trigger("mouseout"); });

  • jQuery使用数组编写图片无缝向左滚动

    jQuery编程实现一组由8幅图组成的图片,进入网页初始时显示前面4张,然后自动向左滚动,直到屏幕显示的是后4张时停止滚动. 下面是jQuery代码: 复制代码 代码如下: $(document).ready(function() { var $images = $('#images img'); var imgs = $images.length; var next_img; for(var i=0;i<imgs;i++) { next_img=$images.eq(i); scroll(ne

  • JS图片无缝、平滑滚动代码

    非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

  • 图片无缝滚动代码(向左/向下/向上)

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,

  • jQuery实现的网站banner图片无缝轮播效果完整实例

    jQuery实现的网站banner图片无缝轮播效果完整实例

    本文实例讲述了jQuery实现的网站banner图片无缝轮播效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>图片轮播</title&g

  • jquery实现图片无缝滚动 蒙版遮蔽效果

    本文实例为大家分享了jquery实现图片无缝滚动.蒙版效果的具体代码,供大家参考,具体内容如下 1.无缝连接:通过对li设置属性float:left:消除标签之间的间隔 2.通过对ul整体进行偏移设置,使图片整体滚动, 3.设置图片切换时机, 4.蒙版遮罩移入时机的选择 代码片. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

  • 可自定义速度的js图片无缝滚动示例分享

    思路: 一组图片 控制它的滚动条进行滚动 且此时对这组图片进行复制并添加进原图片组中,现在就有两组图片了.你可以想象一下,现在滚动条继续滚动,原来那组图片最后一张图片已经滚至顶端且消失,复制的那组图片的第一张跟在原图最后一张图片后出现,此时你就能感觉到无缝滚动了. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

  • jquery实现marquee效果(文字或者图片的水平垂直滚动)

    jquery实现marquee效果(文字或者图片的水平垂直滚动)

    原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现.后来又喜欢上了jquery,下面写的内容希望对初学者有些帮助,高手勿喷,但欢迎指导,感激不尽. 原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果.然后通过整个大容器滚动条的左右或者上下的移动来实现滚动.下面附上一张手绘的图,来简要阐述下原理.首先,我们的目的是实现框1中的内容水平向左滚动(向右

  • js实现图片无缝滚动

    js实现图片无缝滚动

    js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图: <!DOCTYPE html> <html

  • 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力.如果用户仅仅在首屏停留,还可以节省流量.如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载. 图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一

随机推荐