1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title></title>
  7.          <style type="text/css">
  8.              * {
  9.                  margin: 0px;
  10.                  padding: 0px;
  11.                  list-style: none;
  12.              }
  13.  
  14.              div>span {
  15.                  margin-top: 30px;
  16.                  background: #e0e0e0;
  17.                  color: red;
  18.                  font-size: 25px;
  19.                  width: 50px;
  20.                  height: 30px;
  21.                  line-height: 30px;
  22.                  text-align: center;
  23.                  display: inline-block;
  24.                  margin-right: 3px;
  25.                  font-weight: bolder;
  26.                  cursor: pointer;
  27.              }
  28.  
  29.              nav {
  30.                  margin-top: 30px;
  31.                  width: 600px;
  32.                  height: 300px;
  33.  
  34.                  overflow: hidden;
  35.                  position: relative;
  36.              }
  37.  
  38.              ul {
  39.                  width: 8888px;
  40.                  height: 100%;
  41.                  position: absolute;
  42.                  top: 0px;
  43.                  left: 0px;
  44.              }
  45.  
  46.              ul>li {
  47.                  width: 200px;
  48.                  height: 100%;
  49.                  background: #FF6700;
  50.                  float: left;
  51.                  font-size: 40px;
  52.                  color: #fff;
  53.                  text-align: center;
  54.                  line-height: 300px;
  55.              }
  56.  
  57.              li:nth-of-type(2) {
  58.                  background: gray;
  59.              }
  60.  
  61.              li:nth-of-type(3) {
  62.                  background: red;
  63.              }
  64.  
  65.              li:nth-of-type(4) {
  66.                  background: green;
  67.              }
  68.  
  69.              li:nth-of-type(5) {
  70.                  background: cornflowerblue;
  71.              }
  72.  
  73.              li:nth-of-type(6) {
  74.                  background: gold;
  75.              }
  76.          </style>
  77.      </head>
  78.  
  79.      <body>
  80.          <div><span class="left"><</span><span class="right">></span></div>
  81.          <nav>
  82.              <ul>
  83.                  <li>AAAA</li>
  84.                  <li>BBBB</li>
  85.                  <li>CCCC</li>
  86.                  <li>DDDD</li>
  87.                  <li>EEEE</li>
  88.                  <li>FFFF</li>
  89.              </ul>
  90.          </nav>
  91.          <script type="text/javascript">
  92.              var ul = document.querySelector("ul");
  93.              var left = document.querySelector(".left");
  94.              var right = document.querySelector(".right");
  95.  
  96.              var i = 0,
  97.                  timer, timer2,timer3,timer4;
  98.              LEFT();
  99.              function LEFT() {
  100.                  clear();
  101.                  function move1() {
  102.                      i -= 40;
  103.                      if(i <= -600) {
  104.                          clearInterval(timer);
  105.                          i = -600;
  106.                          timer4=setTimeout(RIGHT, 5500);
  107.                      }
  108.                      ul.style.left = i + "px";
  109.                  }
  110.                  timer = setInterval(move1, 10)
  111.              }
  112.  
  113.              function RIGHT() {
  114.                  clear();
  115.                  function move2() {
  116.                      i += 40;
  117.                      if(i >= 0) {
  118.                          i = 0;
  119.                          clearInterval(timer2);
  120.                          timer3=setTimeout(LEFT, 5500);
  121.                      }
  122.                      ul.style.left = i + "px";
  123.                  }
  124.                  timer2 = setInterval(move2, 10);
  125.              }
  126.  
  127.              left.onclick=function(){
  128.                  clear();
  129.                  LEFT();
  130.  
  131.              }
  132.              right.onclick=function(){
  133.                  clear();
  134.                  RIGHT();
  135.  
  136.              }
  137.              function clear(){
  138.                  if(timer){
  139.                      clearInterval(timer)
  140.                  }
  141.                  if(timer2){
  142.                      clearInterval(timer2)
  143.                  }
  144.                  if(timer3){
  145.                      clearTimeout(timer3)
  146.                  }
  147.                  if(timer4){
  148.                      clearTimeout(timer4)
  149.                  }
  150.              }
  151.          </script>
  152.      </body>
  153.  
  154.  </html>

js特效——自动滚动的更多相关文章

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

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

  2. 滚动变色的文字js特效

    Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...

  3. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

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

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

  5. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

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

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

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

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

  8. JS平滑无缝滚动实现———实现首页广告自动滚动效果（附实例）

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...

  9. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

随机推荐

  1. 用chrony代替ntpd时间同步服务器

    Chrony是一个开源的自由软件,它能保持系统时钟与时钟服务器(NTP)同步,让时间保持精确. 它由两个程序组成:chronyd和chronyc. chronyd是一个后台运行的守护进程,用于调整内核 ...

  2. mysql开发之---每日一得01

    2015年7月7日------------------------- 1.truncate表会清空建表语句auto_increment的值:某个表的id即是主键也是自增,你能够选择插入随意id值,假设 ...

  3. hdu 1165 Eddy&#39;s research II(数学题，递推)

    // Eddy 继续 Problem Description As is known, Ackermann function plays an important role in the sphere ...

  4. 杂项-DB：DW/DWH（数据仓库）

    ylbtech-杂项-DB:DW/DWH(数据仓库) 数据仓库,英文名称为Data Warehouse,可简写为DW或DWH.数据仓库,是为企业所有级别的决策制定过程,提供所有类型数据支持的战略集合. ...

  5. 求包含每个有序数组(共k个)至少一个元素的最小区间

    title: 求包含每个有序数组(共k个)至少一个元素的最小区间 toc: false date: 2018-09-22 21:03:22 categories: OJ tags: 归并 给定k个有序 ...

  6. 对ajax和jsp渲染的一些感想

    一个多月来,也算是做了两个javaweb的项目,但是对于用哪种方式渲染页面一直有些抉择不定,第一个项目用的ajax,发现各种对htmlDom节点的操作十分的繁琐,需要找到数据填充的节点并添加id值,引 ...

  7. tabBar的图标不被系统渲染

    navi.tabBarItem.selectedImage = [[UIImage imageNamed:imageStr]imageWithRenderingMode:UIImageRenderin ...

  8. windows服务更改配置文件

    现场部署的服务所在文件夹内容如上图所示,由于现场数据库服务器更改了IP,所以我服务里的数据库连接字符串也需要修改(注意到日志文件,从某天改了IP后就再也连不上数据库了) 修改过程: 1.打开服务管理, ...

  9. sql server 清理数据库日志

    USE [master] GO ALTER DATABASE [数据库名] SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE [数据库名] SET ...

  10. 使用 chrome 扩展 Vimium 实现快捷键关闭其他标签页

    Vimium 是一款很强大的键盘操作扩展,几乎所有的操作都可以使用键盘命令完成,还支持自定义按键. 其实 Vimium 很早就支持了关闭其他标签页这个操作,甚至还能关闭左侧标签页和关闭右侧标签页,只是 ...