圖片輪播banner

時間 2019-11-16

標籤圖片 banner 简体版

原文原文鏈接

<!DOCTYPE html>
<html>javascript

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
   body{text-align : center}
   div{margin : 100px auto; width : 790px; positision : relative}
   .an{positision : absolute; right : 200px; bottom : 50px ;height :0px}
   .an a{text-decoration : none; padding : 2px 5px;background-color : #F00}
</style>
<body>
<div>html

<img src = "images/banner1.jpg" id = "1" width = "790px" height = "340px" style = "display : block">
<img src = "images/banner2.jpg" id = "2" width = "790px" height = "340px" style = "display : none">
<img src = "images/banner3.jpg" id = "3" width = "790px" height = "340px" style = "display : none">
<img src = "images/banner4.jpg" id = "4" width = "790px" height = "340px" style = "display : none">java

<div class = "an">
<a href = "" onclick = "change(1)">1</a>
<a href = "" onclick = "change(2)">2</a>
<a href = "" onclick = "change(3)">3</a>
<a href = "" onclick = "change(4)">4</a>
</div>
</div>

<script type = "text/javascript">bootstrap

//num記錄當前顯示的圖片id
   var num = 1;
   var flag;
   function change(n){
       //isNaN(n) 判斷n是不是數字,如果數字，改變number框架

　　if(!isNaN(Number(n))){
num = n;htm

//清空計時器
window.clearTimeout(flag);
}圖片

//獲取全部圖片標籤，經過改變display控制圖片顯示與隱藏，實現輪播效果
   var images = document.getElementsByTagName("img");
       for(i = 0;i < images.length;i++){
           if(images[i].id == num){
               images[i].style.display = "block"
           }else{
               images[i].style.display = "none";
           }
       }
       if(num == 4){
           num = 1;
       }else{
           num++;
       }ip

//設置計時器自動執行方法，實現循環
       flag = window.setTimeout("change()",1000);
   }
   change();
</script>
</body>
</html>get

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。