<!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. maven tomcat 插件

    在 pom.xml 中添加如下内容 <!-- 配置 tomcat 插件 --> <build> <plugins> <plugin> <group ...

  2. CodeForcesGym 100641E Inspectors

    Inspectors Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on CodeForcesGym. O ...

  3. css 超出宽度出现省略号

    display: block; overflow: hidden; width: 260px; white-space: nowrap; text-overflow: ellipsis;

  4. SQLPlus在连接时通常有四种方式

    SQLPlus在连接时通常有四种方式 1. ? 1 sqlplus / as sysdba 操作系统认证,不需要数据库服务器启动listener,也不需要数据库服务器处于可用状态.比如我们想要启动数据 ...

  5. EJB学习(四)——Enterprise Bean(企业Bean)和Entity Bean(实体Bean)

        一.为什么使用EJB ? 企业Bean执行在EJB容器中.企业Bean实际上就是一个封装了业务逻辑的Java类,那么我们为什么要使用EJB呢 ? 1.最重要的原因:分布式.简要的说,分布式能够 ...

  6. 安装ftp碰到的问题及解决方法

    1   CRT显示乱码:     本地windows机器.改动SecureCRT的设置.找到"选项"->"会话选项"->"外观" ...

  7. POJ1390 Blocks 【动态规划】

    Blocks Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4173   Accepted: 1661 Descriptio ...

  8. Mina airQQ聊天 client篇(三)

    开发工具 (FlashBuilder4.7) 程序类型(Adobe Air) Flex Air做的桌面程序,效果还挺好看的.最主要是Socket这一块,它也是异步的,而且在Flex中的事件机制比較强大 ...

  9. Geeks - Range Minimum Query RMQ范围最小值查询

    使用线段树预处理.能够使得查询RMQ时间效率在O(lgn). 线段树是记录某范围内的最小值. 标准的线段树应用. Geeks上仅仅有两道线段树的题目了.并且没有讲到pushUp和pushDown操作. ...

  10. vue-quill-editor 禁止编辑

    每天学习一点点,知识财富涨点点 因为权限问题需要对富文本vue-quill-editor进行禁止编辑,因为也不是专业前端,处理起问题来还是只有看文档和百度,发现对这个提问不是很多,可能很多大牛都不会出 ...