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

来源：互联网发布：ucsc数据库编辑：程序博客网时间：2024/05/21 06:48

<!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" onmouseover="stop();" onmouseout="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 0