<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 图片自动无缝滚动</title>

<script src="JQ/jquery-1.8.0.min.js" type="text/javascript"></script>

<style type="text/css">
ul,li { list-style: none;margin: 0; padding: 0;}
li { float: left;}
img { width: 100px; height: 100px; padding:0 2px}
.a { width: 400px; height:100px;margin: 0 auto; overflow: hidden; border: 1px solid red;}
.aa { width: 200px; height:100px;margin: 50px auto 0 auto; overflow: hidden; border: 1px solid red;}
</style>
</head>
<body>
<div class="a">
<ul>
<li>
<a href="#"><img alt="" src="data:images/3002.gif"/>
</a>
</li>
<li >
<a href="#"><img alt="" src="data:images/3002.gif">
</a>
</li>
<li>
<a href="#"><img alt="" src="data:images/3002.gif">
</a>
</li>
<li>
<a href=""><img alt="" src="data:images/3002.gif">
</a>
</li>
<li>
<a href="#"><img alt="" src="data:images/3002.gif">
</a>
</li>
</ul>
</div>
<!-- <div class="aa">
<ul>
<li>
<a href="#"><img alt="" src="data:images/3002.gif"/>
</a>
</li>
<li >
<a href="#"><img alt="" src="data:images/3002.gif">
</a>
</li>
<li>
<a href="#"><img alt="" src="data:images/3002.gif">
</a>
</li>
<li>
<a href=""><img alt="" src="data:images/3002.gif">
</a>
</li>
<li>
<a href="#"><img alt="" src="data:images/3002.gif">
</a>
</li>
</ul>
</div> -->
<script type="text/javascript">
jQuery.fn.extend({
pic_scroll:function (){
$(this).each(function(){
var _this=$(this);//存储对象
var ul=_this.find("ul");//获取ul对象
var li=ul.find("li");//获取所有图片所有的li
var w=li.size()*li.width();//统计图片的长度
li.clone().prependTo(ul);//克隆图片一份放入ul里
ul.width(2*w);//设置ul的长度，使所有图片排成一排
var i=1,l;
_this.hover(function(){i=0},function(){i=1});//鼠标经过时设置i=0达到鼠标经过停止效果
setInterval(function(){
//定时滚动函数
l = _this.scrollLeft();
if (l < w) {
_this.scrollLeft(l+i);
} else {
_this.scrollLeft(0);
}
},20);
})
}
});
$(document).ready(function(){
$(".a,.aa").pic_scroll();//多个地方使用
})
</script>
</body>
</html>

jquery 图片自动无缝滚动的更多相关文章

  1. 基于jQuery的上下左右无缝滚动应用(单行或多行)

    $(function(){     var _wrap=$('ul.line');//定义滚动区域     var _interval=2000;//定义滚动间隙时间     var _moving; ...

  2. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  3. jQuery图片自动添加水印插件

    JS脚本(jQuery)为图片加水印效果预览:http://hovertree.com/texiao/jquery/94/ 本功能使用HTML5实现,可为图片加上文字水印,可设置文字,设置颜色,位置等 ...

  4. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  5. jquery(入门篇)无缝滚动

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  7. js 实现图片的无缝滚动

      js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...

  8. jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)

    最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...

  9. css 图片的无缝滚动

    转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...

随机推荐

  1. C#后台生成验证码

    https://www.cnblogs.com/vchenpeng/archive/2013/05/12/3074887.html /// <summary>          /// 获 ...

  2. python中的if __name__=='__main__': main()解析

    python中我们会看到一段代码是这样的: if __name__=='__main__': main() 这段代码的什么意思,我们可以知道代码的意思是如果__name__=='__main__'为T ...

  3. golang 多维数组

    具体的题目如下:(就是将多维数组的行列互换) A multi-dimensional array is an array of arrays. 2-dimensional arrays are the ...

  4. 在block内如何修改block外部变量

    默认情况下,在block中访问的外部变量是复制过去的,即:写操作不对原变量生效.但是你可以加上__block来让其写操作生效,示例代码如下: 1 2 3 4 5 6 __block int a = 0 ...

  5. 推荐！手把手教你使用Git(转载)

    转载地址http://blog.jobbole.com/78960/,涂根华的博客. Git基本常用命令如下: mkdir:         XX (创建一个空目录 XX指目录名) pwd:      ...

  6. 第一章 Go语言入门

    文章由作者马志国在博客园的原创,若转载请于明显处标记出处:http://www.cnblogs.com/mazg/ 1.1 编译环境及开发工具 1.1.1 Go语言编译器 下载地址:http://li ...

  7. 跟我一起读postgresql源码(九)——Executor(查询执行模块之——Scan节点(上))

    从前面介绍的可优化语句处理相关的背景知识.实现思想和执行流程,不难发现可优化语句执行的核心内容是对于各种计划节点的处理,由于使用了节点表示.递归调用.统一接口等设计,计划节点的功能相对独立.代码总体流 ...

  8. Linux常用命令之文件处理命令

    注:由于Linux操作系统有些目录不能轻易操作,特此建议大家在家目录home,或root.tmp目录下练习命令,以免带来不必要的损失 一.查询目录中的内容:ls 命令格式:ls [选项] [文件或目录 ...

  9. es5预览本地文件、es6练习代码演示案例

    es6简单基础: <!DOCTYPE html> <html> <head> <meta name="viewport" content= ...

  10. 关于python使用cv画矩形并填充颜色同时填充文字

    font = cv2.FONT_HERSHEY_SIMPLEX # 使用默认字体 cv2.rectangle(im, (10, 10), (110, 110), (0, 0, 255), thickn ...