图片轮播，鼠标放上去即停止，鼠标移除即播放下一张图片

最新推荐文章于 2023-11-21 20:17:05 发布

陈艾语

最新推荐文章于 2023-11-21 20:17:05 发布

阅读量1.2w

点赞数 6

分类专栏： web 文章标签：图片轮播

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>

陈艾语

关注

6
点赞
踩
28

收藏

觉得还不错? 一键收藏
2
评论
图片轮播，鼠标放上去即停止，鼠标移除即播放下一张图片

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

扫一扫