js淡入淡出轮播

最新推荐文章于 2019-08-03 10:23:39 发布

smilesgp

最新推荐文章于 2019-08-03 10:23:39 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/smilesgp/article/details/72540936

本文介绍了一种使用HTML和CSS实现的简单图集轮播效果。通过设置定时器自动切换图片显示，并利用鼠标悬停事件暂停轮播。此外，还提供了手动导航按钮以便用户控制图片切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
body, div, ul, li{margin:0; padding:0;}
ul{list-style-type: none;}
body{background:#000; text-align: center;}
#box {position: relative;width: 492px;height: 172px;background: #fff;border-radius: 5px;border: 8px solid #fff; margin: 10px auto;}
#box .list{position: relative;width: 490px;height: 170px; overflow: hidden; border: 1px solid #ccc;}
#box .list li {position: absolute;top: 0;left: 0;width: 490px; height: 170px;}
#box .count {position: absolute;right: 0;bottom: 5px;}
#box .count li {color: #fff;float: left;width: 20px;height: 20px;cursor: pointer;margin-right: 5px;overflow: hidden;background: #F90;border-radius:20px; cursor:pointer;}
#box .count li.current {color:#fff; font-weight:700; background:#f60;}
#box .left{position:absolute; top:60px; left:0; font-size:20px; cursor:pointer;}
#box .right{position:absolute; top:60px; right:0px; font-size:20px; cursor:pointer;}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li style="display:block;"><img src="images/1.jpg" width="490" height="170"></li>
<li style="display:none;"><img src="images/2.jpg" width="490" height="170"></li>
<li style="display:none;"><img src="images/3.jpg" width="490" height="170"></li>
</ul>
<ul class="count">
<li class="current">1</li>
<li>2</li>
<li>3</li>
</ul>
<h2 class="left"> < </h2>
<h2 class="right"> > </h2>
</div>
<script>
var box=document.getElementById('box');
var uls=document.getElementsByTagName('ul');
var imgs=uls[0].getElementsByTagName('li');
var btn=uls[1].getElementsByTagName('li');
var header=box.getElementsByTagName('h2');
for(i=0; i<btn.length; i++){
btn[i].index=i;
btn[i].onmouseover=function(){
for(var j=0;j<btn.length; j++){
btn[j].className="";
imgs[j].style.display="none";
};
this.className="current";
i=this.index;
imgs[i].style.display="block";
};
};
var i=0;
function abc(){
if(i==imgs.length){
i=0;
};
if(i==-1){
i=imgs.length-1;
};
for(var j=0;j<btn.length; j++){
btn[j].className="";
imgs[j].style.display="none";
};
btn[i].className="current";
imgs[i].style.display="block";
};
dd=setInterval(function(){
i++;
abc();
},2000);
header[0].onclick=function(){
i--;
abc();
};
header[1].onclick=function(){
i++;
abc();
};
box.onmouseover=function(){
clearInterval(dd);
};
box.onmouseout=function(){
dd=setInterval(function(){
i++;
abc();
},2000);
};
</script>
</body>
</html>