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. queue 之团队队列（摘）

    有t个团队的人正在排一个长队.每次新来一个人时,如果他有队友在排队,那么这个新人会插队到最后一个队友的身后.如果没有任何一个队友排队,则他会排到长队的队尾. 输入每个团队中所有队员的编号,要求支持如下 ...

  2. yum添加源。

    本文以centos 7为准.其他版本的linux可能存在一些偏差. 第一:索引文件. 1)repo文件. 1.repo文件是指以repo为结尾的文件.是 仓库源的索引文件.将其添加到yum的repo仓 ...

  3. 理解ThreadLocal(二)

    首先,ThreadLocal 不是用来解决共享对象的多线程访问问题的,一般情况下,通过ThreadLocal.set() 到线程中的对象是该线程自己使用的对象,其他线程是不需要访问的,也访问不到的.各 ...

  4. oracle DBLink

    现有两个oracle DB为A和B,为了能在A数据库中对B数据库进行操作,我们需要在A数据库中建立对B的DBLink.    在创建DBLink之前,我们首先去检查下DB A的global_names ...

  5. SQLServer 2012 可视化窗口中，设置“时间”默认值为“当前时间"

    最近,需要在SQLServer 2012中,设置datetime的默认值为当前时间. 通过可视化窗口进行设置,而不是将getdate()函数写在sql语句中,也不是将‘2022-2-2 22:22:2 ...

  6. CentOS6.4 LAMP环境搭建

    网上的教程,不能按着抄打进去,这样会打乱你环境放置位置, 会导致配置路径会出问题. 要有一个环境目录优化, 把环境文件都装在/usr/local里面 首先,把安装文件rar都放置在/usr/local ...

  7. 分析BGARefreshLayout-master

    一.知识点,创建BaseActivity 建立方法的逻辑顺序 并将一些常用的方法填充到其中 ①.将initView().setListener().onClick().processLogic()方法 ...

  8. django之uWSGI配置 +Nginx

    参考文档 官方文档   安装: pip install uwsgi 启动命令: 方法一.直接命令启动 /home/zabbix/application/python/bin/uwsgi --socke ...

  9. If-Modified-Since和If-None-Match

    If-Modified-Since & If-None-MatchIf-Modified-Since,和 Last-Modified 一样都是用于记录页面最后修改时间的 HTTP 头信息,只是 ...

  10. API接口测试01理论

    定义 接口测试是系统组件间及多个系统之间的测试 如:app与Server间如何进行数据交换,传递 意义 确保主要流程及系统的稳定性 将BUG控制在项目前期 缩短产品的研发周期 检查服务器的异常处理能力 ...