<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             * {

                 margin: 0px;

                 padding: 0px;

                 list-style: none;

             }

             div>span {

                 margin-top: 30px;

                 background: #e0e0e0;

                 color: red;

                 font-size: 25px;

                 width: 50px;

                 height: 30px;

                 line-height: 30px;

                 text-align: center;

                 display: inline-block;

                 margin-right: 3px;

                 font-weight: bolder;

                 cursor: pointer;

             }

             nav {

                 margin-top: 30px;

                 width: 600px;

                 height: 300px;

                 overflow: hidden;

                 position: relative;

             }

             ul {

                 width: 8888px;

                 height: 100%;

                 position: absolute;

                 top: 0px;

                 left: 0px;

             }

             ul>li {

                 width: 200px;

                 height: 100%;

                 background: #FF6700;

                 float: left;

                 font-size: 40px;

                 color: #fff;

                 text-align: center;

                 line-height: 300px;

             }

             li:nth-of-type(2) {

                 background: gray;

             }

             li:nth-of-type(3) {

                 background: red;

             }

             li:nth-of-type(4) {

                 background: green;

             }

             li:nth-of-type(5) {

                 background: cornflowerblue;

             }

             li:nth-of-type(6) {

                 background: gold;

             }

         </style>

     </head>

     <body>

         <div><span class="left"><</span><span class="right">></span></div>

         <nav>

             <ul>

                 <li>AAAA</li>

                 <li>BBBB</li>

                 <li>CCCC</li>

                 <li>DDDD</li>

                 <li>EEEE</li>

                 <li>FFFF</li>

             </ul>

         </nav>

         <script type="text/javascript">

             var ul = document.querySelector("ul");

             var left = document.querySelector(".left");

             var right = document.querySelector(".right");

             var i = 0,

                 timer, timer2,timer3,timer4;

             LEFT();

             function LEFT() {

                 clear();

                 function move1() {

                     i -= 40;

                     if(i <= -600) {

                         clearInterval(timer);

                         i = -600;

                         timer4=setTimeout(RIGHT, 5500);

                     }

                     ul.style.left = i + "px";

                 }

                 timer = setInterval(move1, 10)

             }

             function RIGHT() {

                 clear();

                 function move2() {

                     i += 40;

                     if(i >= 0) {

                         i = 0;

                         clearInterval(timer2);

                         timer3=setTimeout(LEFT, 5500);

                     }

                     ul.style.left = i + "px";

                 }

                 timer2 = setInterval(move2, 10);

             }

             left.onclick=function(){

                 clear();

                 LEFT();

             }

             right.onclick=function(){

                 clear();

                 RIGHT();

             }

             function clear(){

                 if(timer){

                     clearInterval(timer)

                 }

                 if(timer2){

                     clearInterval(timer2)

                 }

                 if(timer3){

                     clearTimeout(timer3)

                 }

                 if(timer4){

                     clearTimeout(timer4)

                 }

             }

         </script>

     </body>

 </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. nyoj 120 建边构强连通

    #include<stdio.h> #include<string.h> #include<queue> using namespace std; #define ...

  2. Java 学习（9）：java Stream & File & IO

    Java 流(Stream).文件(File)和IO Java.io 包几乎包含了所有操作输入.输出需要的类.所有这些流类代表了输入源和输出目标. Java.io 包中的流支持很多种格式,比如:基本类 ...

  3. Weblogic常用监控指标

    http://blog.csdn.net/konglongaa/article/details/53897562

  4. Hadoop集群（第13期)_HBase 常用Shell命令

    进入hbase shell console$HBASE_HOME/bin/hbase shell如果有kerberos认证,需要事先使用相应的keytab进行一下认证(使用kinit命令),认证成功之 ...

  5. 剑指Offer读书笔记（持续更新中）

    (1)定义一个空的类型,里面没有不论什么成员变量和成员函数,对该类型求sizeof,得到的结果是多少? 答案是1.空类型的实例中不包括不论什么信息,本来求sizeof应该是0,可是当我们声明该类型实例 ...

  6. Linux内核project导论——网络：Netfilter概览

    简单介绍 最早的内核包过滤机制是ipfwadm.后来是ipchains.再后来就是iptables/netfilter了. 再往后,也就是如今是nftables. 只是nftables与iptable ...

  7. Android面试过程描写叙述

    1.之前所写项目的介绍 2.android一些常见问题的问答 3.关于android平时非常少用到但实则非常重要的问题描写叙述 技术分析 1自我感觉面试中比較好的方面: 1.熟悉掌握之前所写项目 2. ...

  8. Codeforces Round #260 (Div. 1)——Civilization

    题目链接 题意: n个点,m条边的森林.q次操作. 每次操作:1.询问x所在树的直径 2.合并x和y所在的树,使得合并后的直径最小 ) 分析: 没有读到图是森林.. .做的好纠结 最開始将每一个树都求 ...

  9. 微软ASP.NET网站部署指南（3）：使用Web.Config文件的Transformations

    1. 综述 大多数程序里都会在Web.config里设置參数,而且在部署的时候须要更改. 每次都手工更改这些配置非常乏味,也easy出错. 该章节将会告诉你假设通过自己主动化更新Web.config文 ...

  10. cmd 进入mysql 小技巧

    1.開始中找出执行:输入cmd 2.查找appserv所在盘,我的在D盘.所以接着输入:d: 3.在d盘中查找mysql所在文件夹:cd appserv\mysql\bin 4.再输入主机名.数据库名 ...