图片定时轮播

图片定时轮播

代码:

<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*图片定时轮播*/
.picture{display:none;}

/*去列表标记及字体样式*/
.list{list-style-type:none;}
</style>
<script>
var li = document.getElementById('ppt').getElementsByTagName("li");
var num = 0;
var len = li.length;
setInterval(function todo() {
    li[num].style.display = "none";

    num = ++num == len ? 0 : num;

    li[num].style.display = "inline-block";

}, 2000);
</script>
</head>

<body>
<div id="ppt">     
    <ul class="list">
          <li><img src="#" width="#" height="#"/></li>
          <li class="picture"><img src="#" width="#" height="#" /></li>
          <li class="picture"><img src="#" width="#" height="#"/></li>
          <li class="picture"><img src="#" width="#" height="#"/></li>
          <li class="picture"><img src="#" width="#" height="#" /></li>
          <li class="picture"><img src="#"width="#" height="#"/></li>
    </ul>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_40581789/article/details/80627703
今日推荐