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. CentOS 7 启动VNC失败问题

    开机后发现VNC服务没有启启来,提示我们使用journalctl -xn查看错误信息,提示信息如下: Sep :: localhost.localdomain systemd[]: Unit vncs ...

  2. Oracle 中的Userenv（）

    1.USEREVN() 返回当前用户环境的信息,opt可以是:ENTRYID,SESSIONID,TERMINAL,ISDBA,LABLE,LANGUAGE,CLIENT_INFO,LANG,VSIZ ...

  3. JSP总结1

    JSP: JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动 ...

  4. Struts2 工作流程

    Struts2使用了WebWork的设计核心(XWork),在内部使用拦截器处理用户请求,从而允许用户业务逻辑控制器和ServletAPI分离.Struts2内部是一个MVC架构,Struts2 的核 ...

  5. [Math]Reverse Integer

    Total Accepted: 111287 Total Submissions: 474471 Difficulty: Easy Reverse digits of an integer. Exam ...

  6. commands - `for`

    internal variable of separator: IFS

  7. linux网络编程：使用单进程实现多客户端通信

    服务端: //回射服务器 //避免僵尸进程 #include "unistd.h" #include "sys/types.h" #include " ...

  8. 区段extent及数据块

    一.区段是表空间中由某个段所使用的一块磁盘空间.他是一组连续的oracle数据块.引入extent的目的是为了减少磁盘空间分配的次数,如果是采用oracle数据块直接分配的话就增加了oracle磁盘空 ...

  9. RMAN之一：快速入门

    1.数据导出基础 (1)创建datapump导出文件的目录对象并为相应用户授予权限. 出于安全考虑,不允许oracle用户直接在OS上进行文件的操作,而应通过directory对象指定. SQL> ...

  10. 初始seajs

    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制 SeaJS本身遵循KISS(Keep It Simple, Stupid ...