<!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. 浏览器中的user-agent的几种模式

    服务器一般会根据访问的浏览器进行识别,针对不同浏览器才用不同的网站样式及结构,也是通过这个信息判断用户使用的平台模式(手机,pc或平板) 识别为手机一般有这几个关键字: "Windows P ...

  2. Layout 不可思议（二）—— 两侧定宽的三列布局

    三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透 网上相关的文章很多,原本已无必要再做赘述 不过既然开了 Layout 系列,三列布局就是必修课 本文整理了一些常用的实现方法,然后 ...

  3. SQL Server CPU

    解决数据库系统的性能问题可能是一项艰巨的任务.了解如何找到问题很重要,但是了解系统对特定请求作出特定反应的原因更加重要.影响数据库服务器上的 CPU 利用率 的因素有很多:SQL 语句的编译和重新编译 ...

  4. Optimize For Ad Hoc Workloads

    --临时工作负载优化   即席查询:也就是查询完没放到Cache当中,每次查询都要重新经过编译,并发高的时候很耗性能: 参数化查询: 一方面解决了重编译问题,但随着数据库数据数据的变更,统计信息的更新 ...

  5. Java 测试驱动开发--“井字游戏” 游戏实战

    TDD 介绍 TDD是测试驱动开发(Test-Driven Development)的英文简称,是敏捷开发中的一项核心实践和技术,也是一种设计方法论.TDD的原理是在开发功能代码之前,先编写单元测试用 ...

  6. 自动刷新 CSS文件

    自动刷新 CSS文件 使用任何代码工具码 CSS,都是需要保存后再切换到浏览器按 F5 刷新查看效果,一次又一次,不管这个改动仅是一个小小的颜色.使用 CSSrefresh 后,改动 CSS 文件保存 ...

  7. ES6 Generators并发

    ES6 Generators系列: ES6 Generators基本概念 深入研究ES6 Generators ES6 Generators的异步应用 ES6 Generators并发 如果你已经读过 ...

  8. 【知了堂学习心得】浅谈c3p0连接池和dbutils工具类的使用

    1. C3P0概述 C3P0是一个开源的JDBC连接池,它实现了数据源和JNDI绑定,支持JDBC3规范和JDBC2的标准扩展.目前使用它的开源项目有Hibernate,Spring等. 2. C3P ...

  9. replace into 浅析之一

    一 介绍  在笔者支持业务过程中,经常遇到开发咨询replace into 的使用场景以及注意事项,这里做个总结.从功能原理,性能和注意事项上做个说明.二 原理2.1 当表中存在主键但是不存在唯一建的 ...

  10. MDK C++中对内联的极度优化

    先来看看我们SmartIRQ的具体实现 // 智能IRQ,初始化时备份,销毁时还原 class SmartIRQ { public: force_inline SmartIRQ(bool enable ...