生活随笔
收集整理的這篇文章主要介紹了
图片轮播，鼠标放上去即停止，鼠标移除即播放下一张图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
總結
以上是生活随笔為你收集整理的图片轮播，鼠标放上去即停止，鼠标移除即播放下一张图片的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
