圖片輪播

時間 2019-12-18

標籤圖片简体版

原文原文鏈接

以前一直都是用jquery寫，沒有嘗試過原生的javascript，今天嘗試着弄了一下，代碼真多，註釋添加的很詳細，供學習交流.....javascript

寫的時候發現一些小問題：css

一、javascript獲取div寬高時，不能使用div.style.width等，彈窗alert(div.style.width);時會發現是一個空值，那是什麼緣由呢？html

　　div.style.width是給div賦值寬，或者改變它的寬度java

　　那麼如何獲取div寬呢？jquery

　　a.<div id="container" style="width:600px;">給div添加內聯樣式，div.style.width，能夠獲取到內聯樣式的寬度。數組

　　b.查了一下網上說須要用div.offsetWidth,可是有點問題，若是給container加border時，offsetWidth是獲取到container的寬度+border的寬度，這一點須要注意。ide

html:函數

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>焦點輪播圖</title>
</head>
<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt="1"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

</body>
</html>

css:學習

 1  <style type="text/css">
 2         *{ margin: 0; padding: 0; text-decoration: none;}
 3         body { padding: 20px;}
 4         #container { width: 600px; height: 400px; overflow: hidden; position: relative; cursor:pointer;}
 5         #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
 6         #list img { float: left;}
 7         #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
 8         #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
 9         #buttons .on {  background: orangered;}
10         .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
11         .arrow:hover { background-color: RGBA(0,0,0,.7);}
12         #container:hover .arrow { display: block;}
13         #prev { left: 20px;}
14         #next { right: 20px;}
15 </style>

css

javascript:優化

  1     <script type="text/javascript">
  2 
  3         window.onload = function () {
  4             var container = document.getElementById('container');  //獲取容器元素
  5             var list = document.getElementById('list');  //獲取包括圖片列表容器元素
  6             var buttons = document.getElementById('buttons').getElementsByTagName('span'); //獲取存放按鈕buttons中的sapn元素,返回值爲數組形式
  7             var prev = document.getElementById('prev');  //左箭頭
  8             var next = document.getElementById('next'); //右箭頭
  9             var index = 1;   //小圓點索引
 10             var len = 5;
 11             var animated = false;
 12             var interval = 3000;
 13             var timer;   //存放定時器
 14             
 15             var imgWidth=container.offsetWidth;  //獲取到container容器的寬度
 16             
 17             //添加事件綁定,點擊next觸發函數
 18             //A 點擊右箭頭
 19             next.onclick=function(){
 20                 if(index==len){
 21                     index=1;
 22                     }else{
 23                     index += 1;     //D
 24                         }
 25                 //list.style.left=parseInt(list.style.left)-imgWidth+"px";
 26                 animate(-imgWidth); //C調用函數傳參
 27                 showButton();  //D
 28                 }
 29             //B 點擊左箭頭
 30             prev.onclick=function(){
 31                 if(index==1){
 32                     index=len;
 33                     }else{
 34                     index -= 1;     //D
 35                         }
 36                 //list.style.left=parseInt(list.style.left)+imgWidth+"px";
 37                 animate(imgWidth);  //C
 38                 showButton();  //D
 39                 }
 40             
 41             //C  提取出一個公共函數,圖片切換顯示
 42             function animate(offset){
 43                 var newleft=parseInt(list.style.left)+offset;  //由A，B中提取公用
 44                 list.style.left=newleft+"px";  //替換掉list.style.left，一個新的值
 45                 if( newleft > -imgWidth ){
 46                     list.style.left = -(imgWidth*len) + 'px';
 47                     }
 48                 if( newleft < -(imgWidth*len) ){
 49                     list.style.left= -imgWidth + 'px';
 50                     }
 51                 }
 52                 
 53          //D 亮起小圓點
 54             function showButton(){
 55                 //關掉其它的按鈕，
 56                 for(var i = 0; i < buttons.length; i++){
 57                     if(buttons[i].className=="on"){
 58                         buttons[i].className="";
 59                         break;
 60                         }
 61                     }
 62                 //只讓對應的顯示
 63                 buttons[index-1].className="on";
 64                 }
 65             
 66             //------------------------我是一條分隔線---------------------
 67             //E   按鈕切換,計算對應圖片的偏移量  （目標值-原始值）*（-container寬度）
 68             for(var i = 0; i < buttons.length; i++){
 69                     buttons[i].onclick=function(){
 70                         //優化代碼,剛學不懂可不用在乎
 71                         if (this.className=='on') {
 72                             return;
 73                         }
 74                         
 75                         //注意span中的index屬性是本身定義的，與class，id等都是不一樣的
 76                         //getAttribute能夠獲取自定義屬性，也可獲取自帶屬性
 77                         var myIndex=parseInt(this.getAttribute('index'));  //點擊的當前的值,即原始值
 78                         var offset=-imgWidth*(myIndex-index);  //偏移量,index是小圓點索引，不一樣於span中index屬性，即目標值
 79                         animate(offset);
 80                         index=myIndex;  //切換完以後歸位
 81                         showButton();
 82                         }
 83                     }
 84             
 85             //------------------------我是一條分隔線---------------------
 86             // F  定時輪播
 87             function play(){
 88                 timer=setInterval(function(){
 89                     next.onclick();
 90                     },3000);
 91                 }
 92                 
 93             //清除定時器
 94             function stop(){
 95                 clearInterval(timer);
 96                 }
 97                 
 98             container.onmouseover=stop;
 99             container.onmouseout=play;
100             play();
101         }
102     </script>

imgShow

相關標籤/搜索

每日一句

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