JS定时器案列图片轮播

最新推荐文章于 2023-05-18 20:23:20 发布

低调才是最华丽的炫耀

最新推荐文章于 2023-05-18 20:23:20 发布

阅读量375

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/u010479303/article/details/51893889

版权

前端学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端小白第一次写博客，希望大婶些多给意见。

1.一次性定时器 window.setTimeout("js代码",t);

经历时间t之后只执行一次

2.重复性定时器 window.setInterval("js代码",t);

每经历时间t之后就会执行一次

3.清除定时器

window.clearTimeout();

window.clearInterval

图片轮播案列代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换</title>
<link rel="stylesheet" href="css/qiehuantupian.css" />
<style type="text/css">
body{
margin: 0;
padding: 0;

}
div{
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
}
div img{
display: inline-block;
width: 800px;
height: 400px;
}
ul{
display: block;
list-style: none;
position: absolute;
top: 350px;
left: 400px;
opacity: 1;
font-size: 20px;
font-weight: bold;
color: red;
z-index: 3;
transition: all 0.35s ease-in;
}

ul li{
float: left;
margin-left: 10px;
display: block;
width:30px ;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 30px;
border: 1px solid orangered;
}

</style>
<script type="text/javascript">
window.οnlοad=init;
var qiehuan;
function init(){
var obj=document.getElementById("li1");
obj.style.backgroundColor="rgba(255,255,255,0.5)";
qiehuan=window.setInterval("change()",1000);
}
var i=1;

function change(){
i++;
if(i>8){
i=1;
}
var obj=document.getElementById("pic");
obj.src="img/pic"+i+".png";
ys();
var obj=document.getElementById("li"+i);
obj.style.backgroundColor="rgba(255,255,255,0.5)";
}

function stop(){
window.clearInterval(qiehuan);
}
function start(){
qiehuan=window.setInterval("change()",1000);
}
function tingtu(n,m){
i=n;
var obj=document.getElementById("pic");
obj.src="img/pic"+n+".png";
ys();
window.clearInterval(qiehuan);
m.style.backgroundColor="rgba(255,255,255,0.5)";
}
function ys(){
for(var j=1;j<=8;j++){
var allobj=document.getElementById("li"+j);
allobj.style.backgroundColor="rgba(0,0,0,0.5)";
}
}
</script>
</head>
<body>
<div>
<img id="pic" src="img/pic1.png" οnmοuseοver="stop()" οnmοuseοut="start()">
<ul>
<li id="li1" οnmοuseοver="tingtu(1,this)" οnmοuseοut="start()">1</li>
<li id="li2" οnmοuseοver="tingtu(2,this)" οnmοuseοut="start()">2</li>
<li id="li3" οnmοuseοver="tingtu(3,this)" οnmοuseοut="start()">3</li>
<li id="li4" οnmοuseοver="tingtu(4,this)" οnmοuseοut="start()">4</li>
<li id="li5" οnmοuseοver="tingtu(5,this)" οnmοuseοut="start()">5</li>
<li id="li6" οnmοuseοver="tingtu(6,this)" οnmοuseοut="start()">6</li>
<li id="li7" οnmοuseοver="tingtu(7,this)" οnmοuseοut="start()">7</li>
<li id="li8" οnmοuseοver="tingtu(8,this)" οnmοuseοut="start()">8</li>
</ul>
</div>
</body>
</html>

低调才是最华丽的炫耀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS定时器案列图片轮播

前端小白第一次写博客，希望大婶些多给意见。1.一次性定时器 window.setTimeout("js代码",t);经历时间t之后只执行一次2.重复性定时器 window.setInterval("js代码",t);每经历时间t之后就会执行一次3.清除定时器window.clearTimeout();window.clearInterval
复制链接

扫一扫