图片轮播

最新推荐文章于 2023-11-09 13:09:36 发布

荒--

最新推荐文章于 2023-11-09 13:09:36 发布

阅读量348

点赞数

分类专栏： WEB基础

本文链接：https://blog.csdn.net/wangqing84411433/article/details/70570157

版权

WEB基础专栏收录该内容

30 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>图片轮播</title>
    <meta charset="utf-8"/>
    <style type="text/css">
      ul{
        list-style-type:none;/*去掉列表前面的.*/
        border:2px solid #CCC;
        width:480px;
        height:360px;
        margin:0;
        padding:0;
      }
     li{
       width:480px;
       height:360px;
       margin:0;
       padding:0;
     }
     .show{
       display:block;
     }
     .hide{
       display:none;
     }
    </style>
    <script type="text/javascript">
      window.onload = function(){
    	lunbo();  
      };
      var id;
      var index = 0;//轮播次数
      function lunbo(){
        id = setInterval(function(){
          //将所有li隐藏
          var ul = document.getElementById("photos");
          //在元素下中子元素--获取所有li
          var lis = ul.getElementsByTagName("li");
          for(var i=0;i<lis.length;i++){
       	    lis[i].className = "hide";
          }
          //将下一个li显示
          index ++;
          lis[index % lis.length].className = "show";
        },1000);
    }
    function stop(){
      clearInterval(id);
    }
    </script>
  </head>
  <body>
    <ul id="photos" οnmοuseοver="stop();" οnmοuseοut="lunbo();">
      <li class="show"><img src="../images/f1.jpg"/></li>
      <li class="hide"><img src="../images/f2.jpg"/></li>
      <li class="hide"><img src="../images/f3.jpg"/></li>
      <li class="hide"><img src="../images/f4.jpg"/></li>
    </ul>
  </body>
</html>

注意：页面加载完毕后,自动轮播，鼠标移入时,取消轮播，鼠标移除后继续轮播

荒--

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片轮播

图片轮播 ul{ list-style-type:none;/*去掉列表前面的.*/ border:2px solid #CCC; width:480px; height:360px; margin:0; padding:0; } li{
复制链接

扫一扫