<!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. 推荐系统 LFM 算法的简单理解，感觉比大部分网上抄来抄去的文章好理解

    本文主要是基于<推荐系统实践>这本书的读书笔记,还没有实践这些算法. LFM算法是属于隐含语义模型的算法,不同于基于邻域的推荐算法. 隐含语义模型有:LFM,LDA,Topic Model ...

  2. K：java中的hashCode和equals方法

      hashCode和equals方法是Object类的相关方法,而所有的类都是直接或间接的继承于Object类而存在的,为此,所有的类中都存在着hashCode和equals.通过翻看Object类 ...

  3. Maven的下载、安装与环境配置

    在创建一个项目时,搭建环境往往是编写具体代码的先决条件,而获取到所有需要的jar包是其中的重中之重.起初,人们在需要jar包的时候总会在网上四处查找,而且如果不知道某jar包版本的更迭,写出的代码或许 ...

  4. [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球

    综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...

  5. Nginx集群之WCF大文件上传及下载(支持6G传输)

    目录 1       大概思路... 1 2       Nginx集群之WCF大文件上传及下载... 1 3       BasicHttpBinding相关配置解析... 2 4       编写 ...

  6. lbp特征提取（等价模式）

    LBP等价模式 考察LBP算子的定义可知,一个LBP算子可以产生多种二进制模式(p个采样点)如:3x3邻域有p=8个采样点,则可得到2^8=256种二进制模式:5x5邻域有p=24个采样点,则可得到2 ...

  7. windows服务管理操作

    服务程序是windows上重要的一类程序,它们虽然不与用户进行界面交互,但是它们对于系统有着重要的意义.windows上为了管理服务程序提供了一个特别的程序:服务控制管理程序,系统上关于服务控制管理的 ...

  8. jq传统火车轮播图

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

  9. 使用JSON JavaScriptSerializer进行反序列化和序列化时报错，字符的长度超出了MaxJsonLength的长度

    文章参考:https://www.cnblogs.com/wangfuyou/p/6046307.html 1.解决办法是在web.config增加如下节点到<configuration> ...

  10. django命令(笔记，自己看的）

    新建一个项目,名字为mysite:django-admin.py startproject mysite 新建一个应用App,名字为apppython manage.py startapp learn ...