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. jquery.form上传文件

    建立test文件夹 PHP代码: <?php //var_dump($_FILES['file']);exit; if(isset($_GET['option']) && $_G ...

  2. arm ldr 指令

    ldr 指令格式:(读取概念) ldr{条件} 1目的寄存器,2存储器地址 eg: ldr r0,[r1]; 把r1中数据值读取到r0中: ldr r0,[r1,r2];把r1+r2的数值 读取到r0 ...

  3. Interaction with the camera or the photo library

    As we said before, we need a delegate to deal with the user interaction with the camera or the photo ...

  4. ios html5 长按复制文本

    以前做的项目,主要是针对ios的,安卓上面也没有测试. 原理其实是系统自带的功能,那时候借鉴的其他网站,没有试验通过document.execCommand("Copy"),别的j ...

  5. mysql的四种隔离级别

    一.READ UNCOMMITTED(未提交读) 在READ UNCOMMITTED级别,事务中的修改,即使未提交,对其他事务也都是可见的.事务可以读取未提交的数据,这也被称为脏读( Dirty RE ...

  6. LaTeX中titlesec宏包的使用

    在 xelatex 中使用 \usepackage 指令使用 titlesec 宏包时,可以指定一些格式选项,如下: \usepackage[center]{titlesec} 其中 center 可 ...

  7. Nginx 配置指令的执行顺序（三）

    如前文所述,除非像 ngx_set_misc 模块那样使用特殊技术,其他模块的配置指令即使是在 rewrite 阶段运行,也不能和 ngx_rewrite 模块的指令混合使用.不妨来看几个这样的例子. ...

  8. python学习day12

    目录 html结构与标签 css样式   html结构之head <head> 标签用于定义文档的头部,它是所有头部元素的容器.<head> 中的元素可以引用脚本.指示浏览器在 ...

  9. 如何让旧版IE浏览器认识HTML5元素

    <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" ...

  10. GO学习资源站

    GO语言学习资源网站 http://golangtc.com https://gobyexample.com http://golang-examples.tumblr.com