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. java面对对象 关键字this super

    this:this是指向对象本身的一个指针,成员函数内部指向当前类的对象 其实this主要要三种用法: 1.表示对当前对象的引用! 2.表示用类的成员变量,而非函数参数,注意在函数参数和成员变量同名是 ...

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

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

  3. c#接口定义与应用

    public interface IBankAccount //只能加public修饰符,或者什么都不加 { void Playin(decimal money); //函数前不加任何修饰符号 boo ...

  4. wxwidgets demo

    环境说明: IOS: mac 10.9 wx:  wxWidgets-2.9.5  (http://www.wxwidgets.org/downloads/) gcc: $gcci686-apple- ...

  5. 整体刷新和局部刷新frameset窗口(转)

    在项目中,经常会遇到页面分割,最常见的系统或网站的主界面.主页面分为,上面系统简介.下面作者简介.左边系统功能菜单.右边则是菜单真正展示的界面.               遇到这种这种分割页面,大家 ...

  6. Eclipse图标含义

    学习了这么久,之前也没注意,这次在csdn找个了文章,记录一下: Eclipse的Package Explorer中用图标表示了很多内容,刚刚开始接触Eclipse时对这些图标表示的内容并不清楚,而且 ...

  7. PM产品经理练级攻略（1-5等级）

    大家都叫“PM”,但做的事情却完全不同? “PM”这个词到底是什么意思? 这个话题恐怕也是各位同行都一直在想,也一直想不清楚的吧,我也是. 每次看到各种“产品经理的能力模型”,我都觉得有点扯淡,总觉得 ...

  8. haproxy ssl相关配置

    ssl-default-bind-options [<option>]... This setting is only available when support for OpenSSL ...

  9. python官方文档

    Tutorialstart here Library Referencekeep this under your pillow Language Referencedescribes syntax a ...

  10. [Leetcode][Python]43: Multiply Strings

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 43: Multiply Stringshttps://leetcode.co ...