原生js实现简单的定时器轮播图 - 缥缈博客-个人技术博客

特别声明：文章多为网络转载，资源使用一般不提供任何帮助，特殊资源除外，如有侵权请联系！

实现思路就一个，利用js定时的改变css的display属性，让他一直循环即可，样式有点丑，没有写样式，主要是功能，大家只要自己修改下就行了，代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

</head>

<style type="text/css">

#da{
height: 500px;
background: red;
width: 600px;
/*margin: 0 auto;*/
}
#da2{
height: 500px;
background: grey;
width: 600px;
display: none;
/*margin: 0 auto;*/
}

#da3{
height: 500px;
background: black;
width: 600px;
display: none;
/*margin: 0 auto;*/
}

#zhong{
height: 100px;
width: 200px;
float: left;
background: blue;
}

#zhong2{
width: 200px;
height: 100px;
float: left;
background: yellow;
}

#zhong3{
width: 200px;
height: 100px;
float: left;
background: black;
}
</style>


<body>


<div id="zhong"></div>

<div id="zhong2"></div>
<div id="zhong3"></div>

<div id="da"></div>
<div id="da2"></div>
<div id="da3"></div>

</body>

<script type="text/javascript">


var zhong = document.getElementById('zhong');
var zhong2 = document.getElementById('zhong2');
var zhong3 = document.getElementById('zhong3');
var da = document.getElementById('da');
var da2 = document.getElementById('da2');
var da3 = document.getElementById('da3');
// var zhong = document.getElementById('zhong');


// alert(zhong);

// function gai(){
// alert('1');
// zhong.style.background = 'blue';
// }


zhong.onmouseover = function(){
// alert('1');
// zhong.style.background = 'blue';
// da.style.background = 'blue';
da.style.display = "block";
da2.style.display = "none";
da3.style.display = "none";
}

zhong2.onmouseover = function(){
da.style.display = "none";
da2.style.display = "block";
da3.style.display = "none";

}

zhong3.onmouseover = function(){
da.style.display = "none";
da2.style.display = "none";
da3.style.display = "block";
}


function ding(){
da.style.display = "none";
da2.style.display = "block";
da3.style.display = "none";

var xiao2 = setTimeout('ding2()', 2000);
// clearInterval(xiao2);
clearInterval(xiao);
}


function ding2(){
da.style.display = "none";
da2.style.display = "none";
da3.style.display = "block";
// clearInterval(xiao2);
var xiao3 = setTimeout('ding3()', 2000);
clearInterval(xiao2);
}

function ding3(){
da.style.display = "block";
da2.style.display = "none";
da3.style.display = "none";

var xiao4 = setTimeout('ding()', 2000);
clearInterval(xiao3);
// clearInterval(xiao4);
}


var xiao = setTimeout('ding()', 2000);
</script>
</html>

本文最后更新于2019-12-22，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

分享到：