1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js实现左右自动切换</title>
  6.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  7. </head>
  8. <style>
  9.     .b2{
  10.         width: 1190px;
  11.         height: 147px;
  12.         margin: 44px auto 0;
  13.         position: relative;
  14.         overflow: hidden;
  15.         background-color: gray;
  16.     }
  17.     .b2 .b2list{
  18.         width: 2655px;
  19.         height: 147px;
  20.         position: absolute;
  21.         top: 0;
  22.         left: 0;
  23.     }
  24.     .b2 .item{
  25.         width: 285px;
  26.         height: 147px;
  27.         margin-left: 10px;
  28.         float: left;
  29.         border-top: 1px solid transparent;
  30.         background-color: red;
  31.     }
  32. </style>
  33. <body>
  34.     <div class="b2">
  35.         <div class="b2list" data="0">
  36.             <div class="item">1</div>
  37.             <div class="item">2</div>
  38.             <div class="item">3</div>
  39.             <div class="item">4</div>
  40.             <div class="item">5</div>
  41.             <div class="item">6</div>
  42.             <div class="item">7</div>
  43.             <div class="item">8</div>
  44.             <div class="item">9</div>
  45.         </div>
  46.     </div>
  47.     <script>
  48.         $(function(){
  49.             setInterval("auto_left_me();",3000);
  50.         });
  51.         function auto_left_me(){
  52.             var num = $(".b2 .b2list").attr("data");
  53.             num++;
  54.  
  55.             if(num>5){
  56.                 num=0;
  57.             }
  58.             $(".b2 .b2list").attr("data",num);
  59.             $('.b2 .b2list').animate({'left':-295*num});
  60.         }
  61.  
  62.     </script>
  63. </body>
  64. </html>

js实现左右自动滚动的更多相关文章

  1. 今天代码中接触到了一个新的东西。js的上下自动滚动，无缝对接。

    js的上下自动滚动,无缝对接.为什么会用到这个东西呢?因为我在做公司的官网项目的修改的时候.有一个产品介绍的页面,会有很多的产品出现在,中间部分的列表里.但是又不能够使用分页.所以我就在想如果,列表数 ...

  2. JS DIV列表自动滚动带停顿，滚动到底部后自动滚动到顶部

    setInterval -- 间隔执行函数:element.scrollTop -- 元素滚动条距头部的距离: 因为执行代码需要时间,所以最终动态时间会比设置的要慢 var slide = new S ...

  3. JS + jQuery 实现元素自动滚动到底部，兼容IE、FF、Chrome

    HTML代码: <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>删除虚拟机 ...

  4. js点击左右滚动+默认自动滚动类

    js点击左右滚动+默认自动滚动类 点击下载

  5. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. js 实现单行文本滚动效果

    js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...

  7. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  8. Jquery实现图片左右自动滚动

    图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML>  <html> ...

  9. fullpage.js jq全屏滚动插件

    fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...

随机推荐

  1. linux2.4.0源码下载地址（配合毛德操情景分析）

    https://www.kernel.org/pub/linux/kernel/v2.4/

  2. 【巨杉数据库SequoiaDB】SequoiaDB 巨杉数据库 v3.4 版本正式发布

    深秋时节,SequoiaDB 巨杉数据库在深秋给大家带来了“一把火”.SequoiaDB v3.4 正式发布啦! 分布式交易场景性能大幅提升 SequoiaDB 巨杉数据库3.4版本正式发布,v3.4 ...

  3. 洛谷P1765 手机_NOI导刊2010普及（10） 关于cin和getline的一些区别 以及一些STL

    一. cin>>s:cin>>是由两部分构成的,cin和>>,其中cin是输入流istream类的一个对象,隶属于iostream函数库而>>则是运算符 ...

  4. RHEL/CentOS 7中Nginx的systemd service

    源码安装的nginx ,没有systemd service 管理 nginx 下面教程,告诉你如何设置nginx 的systemd service nginx systemd的服务文件是/usr/li ...

  5. Docker最全教程——从理论到实战（十二）

    前言 Ubuntu是一个以桌面应用为主的开源GNU/Linux操作系统,应用很广.本篇主要讲述Ubuntu下使用SSH远程登录并安装Docker,并且提供了Docker安装的两种方式,希望对大家有所帮 ...

  6. 解决Bootstrap container样式左右内边距15px，导致屏幕不美观

    首先上问题:此问题为bootstrap的 container样式导致,该样式默认左右内边距15px为了栅栏效果而设计,具体看源码css样式,如下图,右侧黄色边框边距和30px,实为两个div左浮动,将 ...

  7. python面试的100题（19）

    61.如何在function里面设置一个全局变量 Python中有局部变量和全局变量,当局部变量名字和全局变量名字重复时,局部变量会覆盖掉全局变量. 如果要给全局变量在一个函数里赋值,必须使用glob ...

  8. Application Comparison Of LED Holiday Light And Traditional Incandescent Lights

    Obviously, LED holiday lights are leading the competition in economical Christmas decorations, but t ...

  9. Servlet相关配置

    配置方式 webXML 定义标签<urlpartten>Servlet访问路径 注解 定义的<urlpartten>数组:可以为一个servlet定义多个访问路径. packa ...

  10. IntelliJ IDEA 2017.3-----导入jar包

    1.选择jar包 2.右键选择 3.点击ok