js特效——自动滚动
2024-09-30 02:57:03
<!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>
最新文章
- 【编辑器】【Sublime Text】使用笔记
- HEVC学习之二CTU, CU, CTB, CB, PB, TB
- 栈的存储结构和常见操作（c 语言实现）
- android常用的弹出提示框
- [oracle] 解决X64操作系统PL/SQL连接报错问题 make sure you have the 32 bits oracle client installed
- c#中如何得到百分比数值
- ASP.NET缓存OutputCache和Response.Cache之C#后台设置
- Flash AIR 保存与读取
- LeeCode(Database)-Customers Who Never Order
- python编写工具及配置(notepad++)
- perl json模块
- hdu4770:Lights Against Dudely（回溯 + 修剪）
- python matplotlib 图表局部放大
- Ubuntu 16.04 LTS运行robo3t报错
- 【机器学习】正则化的线性回归 —— 岭回归与Lasso回归
- UNIX网络编程——客户/服务器程序设计示范（四）
- 【bzoj 1407】【Noi2002】Savage
- ASCII记录
- 微信小程序内嵌网页的一些（最佳）实践
- 00、Word Count