图片轮播banner

2018-06-24 00:47:08来源：未知阅读 ()

<!DOCTYPE html>
<html>

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

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

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

//num记录当前显示的图片id
   var num = 1;
   var flag;
   function change(n){
       //isNaN(n) 判断n是否是数字,若是数字，改变number

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

//清空计时器
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++;
       }

//设置计时器自动执行方法，实现循环
       flag = window.setTimeout("change()",1000);
   }
   change();
</script>
</body>
</html>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有