jquery轮播图

最新推荐文章于 2019-06-03 09:07:08 发布

原创最新推荐文章于 2019-06-03 09:07:08 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#轮播图

本文介绍了一种使用HTML、CSS及JavaScript实现的轮播图效果，通过设置图片的透明度变化来达到平滑过渡的目的，并利用定时器实现图片的自动循环播放。

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
ul{
list-style: none;
}
body{
margin: 0;padding: 0;
}
#box{
margin: 100px auto;
position:relative;
}
li{
position: absolute;
opacity: 0;
transition: 1s;
}
li:first-child{
opacity: 1;
}
</style>
<script>
var li=document.getElementsByTagName("li");
var index=0;
function aa(){
index++;
if(index==li.length){
index=0;
}

for (var i=0;i<li.length;i++) {
li[i].style.opacity=0;
}
li[index].style.opacity=1;
}
setInterval("aa()",3000);
</script>
<body>
<div id="box">
<ul>
<li><img src="../day02/img/rr_03.gif"></li>
<li><img src="../day02/img/rr_06.jpg"></li>
<li><img src="../day02/img/rr_08.gif"></li>
<li><img src="../day02/img/rr_10.gif"></li>
</ul>
</div>
</body>
</html>