溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

javascript基礎(chǔ)知識(shí)之html5輪播圖實(shí)例講解（44）

發(fā)布時(shí)間：2020-10-17 08:57:39 來(lái)源：腳本之家 閱讀：158 作者：厚積薄發(fā)2017 欄目：web開(kāi)發(fā)

本文實(shí)例為大家分享了html5輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

1.輪播圖的布局：

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
       
      /*去除默認(rèn)樣式*/ 
      *{ 
        margin: 0; 
        padding: 0; 
      } 
       
      /*設(shè)置div*/ 
      #outer{ 
        width: 520px; 
        height: 333px; 
        /*設(shè)置居中*/ 
        margin: 50px auto; 
        /* 
         * 設(shè)置背景顏色 
         */ 
        background-color: greenyellow; 
        /*設(shè)置上下內(nèi)邊距*/ 
        padding: 10px 0; 
        /*為父元素開(kāi)啟相對(duì)定位*/ 
        position: relative; 
        /*隱藏溢出的內(nèi)容*/ 
        overflow: hidden; 
      } 
       
      /*設(shè)置ul*/ 
      #imgList{ 
        /*去除項(xiàng)目符號(hào)*/ 
        list-style: none; 
        /*設(shè)置ul的寬度*/ 
        width: 2600px; 
        /*開(kāi)啟絕對(duì)定位*/ 
        position: absolute; 
         
        /* 
         * 通過(guò)修改ul的left值，可以切換圖片 
         * 1 0px 
         * 2 -520px 
         * 3 -1040px 
         * 4 -1560px 
         * .... 
         */ 
        left: 0px; 
      } 
       
      /*設(shè)置li*/ 
      li{ 
        /*設(shè)置元素浮動(dòng)*/ 
        float: left; 
        /*設(shè)置外邊距*/ 
        margin: 0 10px; 
      } 
       
       
      /*設(shè)置導(dǎo)航按鈕*/ 
      #nav{ 
        /*開(kāi)啟絕對(duì)定位*/ 
        position: absolute; 
        /*定位*/ 
        bottom: 20px; 
         
        /* 
         * #outer 寬度 520px 
         *  
         * #nav 寬度 125px 
         *  
         * 520 - 125 = 395/2 = 197.5 
         */ 
        left: 197px; 
         
         
      } 
       
      #nav a{ 
        /*設(shè)置a浮動(dòng)*/ 
        float: left; 
        /*設(shè)置寬和高*/ 
        width: 15px; 
        height: 15px; 
         
        /*設(shè)置背景顏色*/ 
        background-color: red; 
         
        /*設(shè)置外邊距*/ 
        margin: 0 5px; 
         
        /*設(shè)置透明*/ 
        opacity: 0.5; 
        filter: alpha(opacity=50); 
      } 
       
       
    </style> 
  </head> 
  <body> 
     
    <!-- 
      創(chuàng)建一個(gè)div作為容器 
    --> 
    <div id="outer"> 
       
      <!--創(chuàng)建一個(gè)ul，用來(lái)保存圖片--> 
      <ul id="imgList"> 
        <li><img src="img/1.jpg" /></li> 
        <li><img src="img/2.jpg" /></li> 
        <li><img src="img/3.jpg" /></li> 
        <li><img src="img/4.jpg" /></li> 
        <li><img src="img/5.jpg" /></li> 
      </ul> 
       
      <!--創(chuàng)建一個(gè)div來(lái)放導(dǎo)航按鈕--> 
      <div id="nav"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
      </div> 
       
    </div> 
     
  </body> 
</html>

2.輪播圖的邏輯：

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
       
      /*去除默認(rèn)樣式*/ 
      *{ 
        margin: 0; 
        padding: 0; 
      } 
       
      /*設(shè)置div*/ 
      #outer{ 
        width: 520px; 
        height: 333px; 
        /*設(shè)置居中*/ 
        margin: 50px auto; 
        /* 
         * 設(shè)置背景顏色 
         */ 
        background-color: greenyellow; 
        /*設(shè)置上下內(nèi)邊距*/ 
        padding: 10px 0; 
        /*為父元素開(kāi)啟相對(duì)定位*/ 
        position: relative; 
        /*隱藏溢出的內(nèi)容*/ 
        overflow: hidden; 
      } 
       
      /*設(shè)置ul*/ 
      #imgList{ 
        /*去除項(xiàng)目符號(hào)*/ 
        list-style: none; 
        /*設(shè)置ul的寬度*/ 
        width: 2600px; 
        /*開(kāi)啟絕對(duì)定位*/ 
        position: absolute; 
         
        /* 
         * 通過(guò)修改ul的left值，可以切換圖片 
         * 1 0px 
         * 2 -520px 
         * 3 -1040px 
         * 4 -1560px 
         * .... 
         */ 
        left: 0px; 
      } 
       
      /*設(shè)置li*/ 
      li{ 
        /*設(shè)置元素浮動(dòng)*/ 
        float: left; 
        /*設(shè)置外邊距*/ 
        margin: 0 10px; 
      } 
       
       
      /*設(shè)置導(dǎo)航按鈕*/ 
      #nav{ 
        /*開(kāi)啟絕對(duì)定位*/ 
        position: absolute; 
        /*定位*/ 
        bottom: 20px; 
         
        /* 
         * #outer 寬度 520px 
         *  
         * #nav 寬度 125px 
         *  
         * 520 - 125 = 395/2 = 197.5 
         */ 
        left: 197px; 
      } 
       
      #nav a{ 
        /*設(shè)置a浮動(dòng)*/ 
        float: left; 
        /*設(shè)置寬和高*/ 
        width: 15px; 
        height: 15px; 
         
        /*設(shè)置背景顏色*/ 
        background-color: red; 
         
        /*設(shè)置外邊距*/ 
        margin: 0 5px; 
         
        /*設(shè)置透明*/ 
        opacity: 0.5; 
        filter: alpha(opacity=50); 
      } 
       
      #nav a:hover{ 
        background-color: black; 
      } 
       
       
    </style> 
     
    <script type="text/javascript" src="js/tools.js"></script> 
     
    <script type="text/javascript"> 
       
      window.onload = function(){ 
         
        //獲取id為imgList的ul 
        var imgList = document.getElementById("imgList"); 
        //獲取所有的圖片標(biāo)簽 
        var imgs = document.getElementsByTagName("img"); 
        //設(shè)置ul的寬度 
        imgList.style.width = 520 * imgs.length + "px";  
         
         
        //設(shè)置導(dǎo)航按鈕居中 
        //獲取id為outer的div 
        var outer = document.getElementById("outer"); 
        //獲取id為nav的div 
        var nav = document.getElementById("nav"); 
         
        nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px"; 
         
         
        //創(chuàng)建一個(gè)變量，來(lái)保存當(dāng)前顯示圖片的索引 
        var index = 0; 
         
        //獲取所有的超鏈接 
        var links = document.getElementsByTagName("a"); 
         
        //設(shè)置對(duì)應(yīng)的超鏈接變成選中狀態(tài) 
        links[index].style.backgroundColor = "black"; 
         
        //開(kāi)啟自動(dòng)切換圖片 
        autoChange(); 
         
         
        /* 
         * 點(diǎn)擊超鏈接切換到對(duì)應(yīng)的圖片 
         * 點(diǎn)擊第一個(gè)超鏈接，切換到第一個(gè)圖片 
         * 點(diǎn)擊第二個(gè)超鏈接，切換到第二個(gè)圖片 
         */ 
         
        //為所有的超鏈接綁定單擊響應(yīng)函數(shù) 
        for(var i=0 ; i<links.length ; i++){ 
           
          //在超鏈接中添加一個(gè)屬性 
          links[i].num = i; 
           
          links[i].onclick = function(){ 
             
            //當(dāng)切換圖片時(shí)，為了不受自動(dòng)切換的影響需要將其關(guān)閉 
            clearInterval(autoTimer); 
             
            //獲取到當(dāng)前點(diǎn)擊的超鏈接的索引 
            //更新當(dāng)前圖片的索引 
            index = this.num; 
             
            //切換到對(duì)應(yīng)的圖片 
            /* 
             * 切換圖片，就是修改imgList的left屬性值 
             * 0 0*-520 
             * 1 1*-520 
             * 4 4*-520 
             */ 
            //imgList.style.left = -520*index + "px"; 
            //設(shè)置過(guò)渡效果 
            move(imgList , "left" , -520*index , 20 , function(){ 
              //圖片切換完畢，打開(kāi)自動(dòng)切換 
              autoChange(); 
            }); 
             
            setA(); 
          }; 
        } 
         
        //定義一個(gè)變量，保存自動(dòng)切換圖片的定時(shí)器 
        var autoTimer;  
         
        /* 
         * 定義一個(gè)函數(shù)，專(zhuān)門(mén)用來(lái)自動(dòng)切換圖片 
         */ 
        function autoChange(){ 
           
          //開(kāi)啟一個(gè)定時(shí)器，來(lái)負(fù)責(zé)圖片的切換 
          autoTimer = setInterval(function(){ 
             
            //索引自增 
            index++; 
             
            //判斷index值是否合法 
            index = index % imgs.length; 
             
             
            //切換圖片 
            move(imgList , "left" , -520*index , 20 , function(){ 
              //動(dòng)畫(huà)執(zhí)行完畢，切換導(dǎo)航點(diǎn) 
              setA(); 
            }); 
             
          },3000); 
           
        } 
         
         
        /* 
         * 函數(shù)專(zhuān)門(mén)用來(lái)設(shè)置超鏈接的選中狀態(tài)的 
         */ 
        function setA(){ 
           
          /* 
           * 因?yàn)樽詈笠粡垐D片和第一張是一樣的，所以當(dāng)顯示的圖片是最后一張時(shí)，應(yīng)該是第一個(gè)的超鏈接變顏色 
           */ 
          if(index >= imgs.length - 1){ 
            index = 0; 
             
            //已經(jīng)切換到最后一張，瞬間將其切換到第一張 
            imgList.style.left = 0; 
             
          } 
           
          /*遍歷超鏈接*/ 
          for(var i=0 ; i<links.length ; i++){ 
            //將所有的超鏈接的背景顏色都設(shè)置為紅色 
            links[i].style.backgroundColor = ""; 
          } 
           
          //將當(dāng)前選中的超鏈接設(shè)置為黑色 
          links[index].style.backgroundColor = "black"; 
           
        } 
         
         
         
      }; 
       
       
    </script> 
     
  </head> 
  <body> 
     
    <!-- 
      創(chuàng)建一個(gè)div作為容器 
    --> 
    <div id="outer"> 
       
      <!--創(chuàng)建一個(gè)ul，用來(lái)保存圖片--> 
      <ul id="imgList"> 
        <li><img src="img/1.jpg" /></li> 
        <li><img src="img/2.jpg" /></li> 
        <li><img src="img/3.jpg" /></li> 
        <li><img src="img/4.jpg" /></li> 
        <li><img src="img/5.jpg" /></li> 
        <li><img src="img/1.jpg" /></li> 
      </ul> 
       
      <!--創(chuàng)建一個(gè)div來(lái)放導(dǎo)航按鈕--> 
      <div id="nav"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
      </div> 
       
    </div> 
     
  </body> 
</html>

外部js代碼：

/* 
 * 定義一個(gè)move()函數(shù)來(lái)執(zhí)行一些簡(jiǎn)單的動(dòng)畫(huà)效果 
 * 參數(shù)： 
 * obj 要執(zhí)行動(dòng)畫(huà)的對(duì)象 
 * attr 執(zhí)行動(dòng)畫(huà)時(shí)要修改的屬性 
 * target 執(zhí)行動(dòng)畫(huà)的目標(biāo)位置 
 * speed 動(dòng)畫(huà)執(zhí)行的速度 
 * callback 回調(diào)函數(shù)，當(dāng)動(dòng)畫(huà)執(zhí)行完畢以后，該回調(diào)函數(shù)會(huì)執(zhí)行 
 */ 
function move(obj, attr, target, speed, callback) { 
  //關(guān)閉之前的定時(shí)器 
  /* 
   * 一般都會(huì)將定時(shí)器的標(biāo)識(shí)作為執(zhí)行動(dòng)畫(huà)對(duì)象的屬性保存，這樣可以確保只有當(dāng)前對(duì)象能訪問(wèn)到定時(shí)器 
   */ 
  clearInterval(obj.timer); 
 
  //判斷向左移還是向右移 
  //0 --> 800 向右移 
  //起始位置 < 目標(biāo)位置 則向右移動(dòng)，速度為正 
  //800 --> 0 向左移 
  //起始位置 > 目標(biāo)位置 則向左移動(dòng)，速度為負(fù) 
 
  //獲取元素的起始位置 
  var current = parseInt(getStyle(obj, attr)); 
 
  if(current > target) { 
    //起始位置 > 目標(biāo)位置 則向左移動(dòng)，速度為負(fù) 
    speed = -speed; 
  } 
 
  //開(kāi)啟一個(gè)定時(shí)器，控制box1移動(dòng) 
  obj.timer = setInterval(function() { 
 
    //獲取box1的當(dāng)前的left值 
    var oldValue = parseInt(getStyle(obj, attr)); 
 
    //通過(guò)舊值來(lái)計(jì)算新值 
    var newValue = oldValue + speed; 
 
    //判斷newValue是否大于800 
    /* 
     * 如果從0 向 800，執(zhí)行動(dòng)畫(huà)，則值越來(lái)越大 
     * 如果從800向0執(zhí)行動(dòng)畫(huà)，則值越來(lái)小 
     */ 
    if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) { 
      newValue = target; 
    } 
 
    //將box1的left值修改為新值 
    obj.style[attr] = newValue + "px"; 
 
    //當(dāng)box1移動(dòng)到800px的位置時(shí)，停止移動(dòng) 
    if(newValue == target) { 
 
      clearInterval(obj.timer); 
 
      //調(diào)用回調(diào)函數(shù) 
      callback && callback(); 
    } 
 
  }, 30); 
 
} 
 
/* 
 * 用來(lái)獲取任意元素的當(dāng)前樣式 
 * 參數(shù)： 
 *   obj 要獲取樣式的元素 
 *   name 要獲取的樣式的名字 
 * 
 * 在讀取元素的樣式時(shí)，如果元素沒(méi)有設(shè)置樣式， 
 * 則火狐、Chrome等瀏覽器會(huì)自動(dòng)計(jì)算元素的樣式值 
 * 而IE瀏覽器，有時(shí)用不會(huì)自動(dòng)計(jì)算，而是返回默認(rèn)值，比如寬度會(huì)返回auto 
 *    
 */ 
function getStyle(obj, name) { 
 
  //判斷瀏覽器中是否含有g(shù)etComputedStyle這個(gè)方法 
  if(window.getComputedStyle) { 
    //支持正常的瀏覽器 
    return getComputedStyle(obj, null)[name]; 
  } else { 
    //只支持IE 
    return obj.currentStyle[name]; 
  } 
 
} 
 
/* 
 * 定義一個(gè)專(zhuān)門(mén)用來(lái)向元素中添加class的函數(shù) 
 * 參數(shù)： 
 *   obj 要添加class屬性的對(duì)象 
 *   cn 要添加的class的屬性值 
 */ 
function addClass(obj, cn) { 
 
  //如果元素中有該class則不添加，沒(méi)有才添加 
  if(!hasClass(obj, cn)) { 
    obj.className += " " + cn; 
  } 
 
} 
 
/* 
 * 創(chuàng)建一個(gè)函數(shù)檢查一個(gè)元素中是否含有指定的class 
 * 如果有，則返回true。否則返回false 
 */ 
function hasClass(obj, cn) { 
 
  //創(chuàng)建正則表達(dá)式 
  var reg = new RegExp("\\b" + cn + "\\b"); 
 
  //返回檢查結(jié)果 
  return reg.test(obj.className); 
} 
 
/* 
 * 用來(lái)從指定元素中刪除class值的方法 
 */ 
function removeClass(obj, cn) { 
 
  //要?jiǎng)h除一個(gè)class，就是將這個(gè)class替換為一個(gè)空串 
  //創(chuàng)建正則表達(dá)式 
  var reg = new RegExp("\\b" + cn + "\\b", "g"); 
 
  //判斷obj中是否含有這個(gè)class 
 
  if(reg.test(obj.className)) { 
    //將內(nèi)容替換為空串 
    obj.className = obj.className.replace(reg, ""); 
  } 
} 
 
/* 
 * 用來(lái)切換元素的class的方法 
 * 如果元素中含有該class，則刪除 
 * 如果元素中沒(méi)有該class，則添加 
 * 
 */ 
function toggleClass(obj, cn) { 
  //檢查obj中是否含有cn 
  if(hasClass(obj, cn)) { 
    //有該class，則刪除 
    removeClass(obj, cn); 
  } else { 
    //沒(méi)有該class，則添加 
    addClass(obj, cn); 
  } 
 
}

注：圖片自己找

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手