html代码：

 <!doctype html>

 <html lang="en">

 <head>

  <meta charset="UTF-8" />

  <title>animate scroll</title>

  <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

  <style type="text/css">

   body{background-color: #f3f3f3;}

   .center{margin: 0 auto;}

   .inline-block{display: inline-block;}

   #banner{width: 800px;height: 200px;margin-top: 40px;border: 1px solid #fff;overflow: hidden;}

   #container{height: 100%;width: 300%;}

   #banner img{width: 200px;height: 100%;display: block;float: left;}

  </style>

 </head>

 <body>

  <div id="banner" class="center">

   <div id="container">

    <img src="data:images/1.jpg"/>

    <img src="data:images/2.jpg"/>

    <img src="data:images/3.jpg"/>

    <img src="data:images/4.jpg"/>

    <img src="data:images/5.jpg"/>

    <img src="data:images/6.jpg"/>

    <img src="data:images/1.jpg"/>

    <img src="data:images/2.jpg"/>

    <img src="data:images/3.jpg"/>

    <img src="data:images/4.jpg"/>

    <div class="clear"></div>

   </div>

  </div>

 </body>

 </html>

js代码：

  <script type="text/javascript">

   var i=1;

   $(function(){

    setInterval(autoScroll,2000);

   });

   function autoScroll(){

    $("#container").animate({

     "margin-left":"-"+200*i+"px"

    },1000,isScroll);

   }

   function isScroll(){

    var _marginLeft = $("#container").css("margin-left");

    var _lenth = $("#container img").length-4;

    if(_marginLeft=='-'+(200*_lenth)+'px'){

     $("#container").css("margin-left","0");

     i=1;

    }else{

     i++;

    }

   }

  </script>

jquery 实现横向滑动自动切换源码（同时显示多张图片）的更多相关文章

  1. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. Android Studio2.x版本无法自动关联源码的解决方法

    Android Studio2.x版本无法自动关联源码的解决方法 在学习android开发过程中,对于一个不熟悉的类,阅读源码是一个很好的学习方式,使用andorid studio开发工具的SDK M ...

  3. SpringBoot自动配置源码调试

    之前对SpringBoot的自动配置原理进行了较为详细的介绍(https://www.cnblogs.com/stm32stm32/p/10560933.html),接下来就对自动配置进行源码调试,探 ...

  4. C++、VC++、MFC网页自动注册、登陆、发帖、留言，QQ注册、QQ申请器源码、注册邮箱源码、自动发帖源码

    C++.VC++.MFC网页自动注册.登陆.发帖.留言,QQ注册.QQ申请器源码.注册邮箱源码.自动发帖源码   参考资料: 自动登录yahoo邮箱http://blog.csdn.net/suisu ...

  5. 使用 maven 自动将源码打包并发布

    1.maven-source-plugin 访问地址 在 pom.xml 中添加 下面的 内容,可以 使用 maven 生成 jar 的同时 生成 sources 包 <plugin> & ...

  6. Maven 自动下载源码和文档

    Maven下在pom中下载之后,如何才能使其自动下载源码和文档? 如果已经下载,可以先从Maven库中删除已经下载的代码,然后再update Maven项目即可

  7. jQuery 2.1.4版本的源码分析

    jQuery 2.1.4版本的源码分析 jquery中获取元素的源码分析 jQuery.each({// 获取当前元素的父级元素 parent: function(elem) { var parent ...

  8. Spring Boot 自动配置 源码分析

    Spring Boot 最大的特点(亮点)就是自动配置 AutoConfiguration 下面,先说一下 @EnableAutoConfiguration ,然后再看源代码,到底自动配置是怎么配置的 ...

  9. SpringBoot源码学习1——SpringBoot自动装配源码解析+Spring如何处理配置类的

    系列文章目录和关于我 一丶什么是SpringBoot自动装配 SpringBoot通过SPI的机制,在我们程序员引入一些starter之后,扫描外部引用 jar 包中的META-INF/spring. ...

随机推荐

  1. 《C++ Primer Plus 6th》读书笔记 - 第十一章 使用类

    1. 运算符重载 2. 计算时间:一个运算符重载示例 3. 友元 1. 友元有三种: 友元函数 友元类 友元成员函数 4. 重载运算符:作为成员函数还是非成员函数 5. 再谈重载:一个矢量类 6. 类 ...

  2. jq插件第二款来袭 图片滚动

    这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...

  3. Django学习(四) Django提供的后台管理系统以及如何定义URL路由

    一旦你建立了模型Models,那么Django就可以为你创建一个专业的,可以提供给生成用的后台管理站点.这个站点可以提供给有权限的人进行已有模型Models数据的增删改查. 将新建的模型Models是 ...

  4. px,dp,dip,sp,in,mm,pt详细分析

    px,dp,dip,sp,in,mm,pt详细分析 px   :(pixels),屏幕的像素点,不同的设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多. dip  :(devi ...

  5. 混合使用Azure LB和ILB访问相同web服务（2）

    那么现在开始,我们配置下两台WEB服务器的Internal Load  balancer: 打开Powershell,检查当前两台虚拟机的端点配置: Get-AzureVM  -ServiceName ...

  6. JSONP(转）

    1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准: 2.不过我们又发现,Web页面上调用js文件时则不 ...

  7. USB 传输协议

    Pipe USB的pipe的两端分别指的是USB host端的内存区域,和设备端的endpoint. pipe分为两类,一类是stream pipe, 另一类是message pipe. 两类的主要区 ...

  8. 【二叉树->链表】二叉树结构转双向线性链表结构(先序遍历)

    二叉树存储结构属于非线性链表结构,转化成线性链表结构,能简化操作和理解.然而由非线性转线性需要对整个树遍历一次,不同的遍历方式转化结果页不一样.下面以先序为例. 方法一: 递归法.递归遍历二叉树,因为 ...

  9. VRay 2.0 SP1 2.10.01 for 3ds max 9/2008/2009/2010/2011/2012 32/64位 顶渲简体中文版+英文版[中国室内设计论坛-室内人]

    VRay 2.0 SP1 2.10.01 for 3ds max 9/2008/2009/2010/2011/2012 32/64位 顶渲简体中文版+英文版[中国室内设计论坛-室内人] 对最新版本的V ...

  10. Windows Server 2012 R2超级虚拟化之七 远程桌面服务的增强

    Windows Server 2012 R2超级虚拟化之七  远程桌面服务的增强 在Windows Server 2012提供的远程桌面服务角色,使用户能够连接到虚拟桌面. RemoteApp程序.基 ...