亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 26
粉絲 2
評(píng)論 0
訪問(wèn)量 30340
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JS實(shí)現(xiàn)圖片輪播
leverWang
原創(chuàng)
949人瀏覽過(guò)

html

  1. <!-- @format -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>輪播圖</title>
  9.     <link rel="stylesheet" href="slider.css" />
  10.   </head>
  11.   <body>
  12.     <div class="box">
  13.       <img
  14.         src="banner/banner1.jpg"
  15.         alt=""
  16.         data-index="1"
  17.         class="slider active"
  18.       />
  19.       <img src="banner/banner2.jpg" alt="" data-index="2" class="slider" />
  20.       <img src="banner/banner3.jpg" alt="" data-index="3" class="slider" />
  21.       <img src="banner/banner4.jpg" alt="" data-index="4" class="slider" />
  23.       <div class="point-list">
  24.         <!-- <span class="point active" data-index="1"></span>
  25.         <span class="point" data-index="2"></span>
  26.         <span class="point" data-index="3"></span> -->
  27.       </div>
  29.       <span class="skip prev">&lt;</span>
  30.       <span class="skip next">&gt;</span>
  31.     </div>
  32.     <script src="slider.js"></script>
  33.   </body>
  34. </html>

slider.js

  1. /** @format */
  3. //獲取所有圖片
  4. var imgs = document.querySelectorAll(".box>img");
  5. //獲取小圓點(diǎn)父節(jié)點(diǎn)
  6. var point_list = document.querySelector(".point-list");
  8. //按圖片數(shù)量生成對(duì)應(yīng)小圓點(diǎn)
  9. imgs.forEach(function (item, index) {
  10.   let span = document.createElement("span");
  11.   if (index == 0) {
  12.     span.classList.add("active");
  13.   }
  14.   span.classList.add("point");
  15.   span.dataset.index = item.dataset.index;
  16.   point_list.append(span);
  17. });
  19. var points = document.querySelectorAll(".point");
  20. //為小圓點(diǎn)添加點(diǎn)擊事件
  21. point_list.addEventListener("click", function (event) {
  22.   //判斷事件節(jié)點(diǎn)類(lèi)型，避免父節(jié)點(diǎn)觸發(fā)事件
  23.   if (event.target.nodeName.toLowerCase() == "span") {
  24.     imgs.forEach(function (img) {
  25.       img.classList.remove("active");
  26.       if (img.dataset.index == event.target.dataset.index) {
  27.         img.classList.add("active");
  28.         setPointActive(img.dataset.index);
  29.       }
  30.     });
  31.   }
  32. });
  34. function setPointActive(index) {
  35.   points.forEach(function (point) {
  36.     point.classList.remove("active");
  37.     if (point.dataset.index == index) {
  38.       point.classList.add("active");
  39.     }
  40.   });
  41. }
  42. //-------------------翻頁(yè)功能------------------------
  43. //獲取翻頁(yè)按鈕
  44. var skip = document.querySelectorAll(".skip");
  46. skip.item(0).addEventListener("click", skipImg);
  47. skip.item(1).addEventListener("click", skipImg);
  49. function skipImg(ev) {
  50.   var currentImg = null;
  51.   //獲取當(dāng)前顯示的圖片
  52.   imgs.forEach(function (img) {
  53.     if (img.classList.contains("active")) {
  54.       currentImg = img;
  55.     }
  56.   });
  57.   //判斷prev是否被點(diǎn)擊
  58.   if (ev.target.classList.contains("prev")) {
  59.     currentImg.classList.remove("active");
  60.     //設(shè)置當(dāng)前圖片為前一張圖片
  61.     currentImg = currentImg.previousElementSibling;
  63.     // 判斷當(dāng)前圖片是否為空，節(jié)點(diǎn)類(lèi)型是否符合
  64.     if (currentImg !== null && currentImg.nodeName.toLowerCase() === "img") {
  65.       currentImg.classList.add("active");
  66.     } else {
  67.       currentImg = imgs[imgs.length - 1];
  68.       currentImg.classList.add("active");
  69.     }
  70.   }
  72.   //判斷next是否被點(diǎn)擊
  73.   if (ev.target.classList.contains("next")) {
  74.     currentImg.classList.remove("active");
  75.     currentImg = currentImg.nextElementSibling;
  77.     if (currentImg !== null && currentImg.nodeName.toLowerCase() === "img") {
  78.       currentImg.classList.add("active");
  79.     } else {
  80.       currentImg = imgs[0];
  81.       currentImg.classList.add("active");
  82.     }
  83.   }
  85.   setPointActive(currentImg.dataset.index);
  86. }
  88. //----------------------------自動(dòng)播放實(shí)現(xiàn)-----------------------
  89. var timer = setInterval(autoPlay, 5000);
  91. var box = document.querySelector(".box");
  93. box.addEventListener("mouseover", function () {
  94.   clearInterval(timer);
  95. });
  96. //鼠標(biāo)移出后2秒開(kāi)始播放下一張，并設(shè)置一個(gè)新的定時(shí)器
  97. box.addEventListener("mouseout", function () {
  98.   setTimeout(function () {
  99.     autoPlay();
  100.     timer = setInterval(autoPlay, 5000);
  101.   }, 2000);
  102. });
  104. function autoPlay() {
  105.   var currentImg = null;
  106.   imgs.forEach(function (img) {
  107.     if (img.classList.contains("active")) {
  108.       currentImg = img;
  109.     }
  110.   });
  111.   currentImg.classList.remove("active");
  112.   currentImg = currentImg.nextElementSibling;
  113.   if (currentImg != null && currentImg.nodeName.toLowerCase() === "img") {
  114.     currentImg.classList.add("active");
  115.   } else {
  116.     currentImg = imgs[0];
  117.     currentImg.classList.add("active");
  118.   }
  119.   setPointActive(currentImg.dataset.index);
  120. }
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：這個(gè)案例并不難,但應(yīng)用了非常的多基礎(chǔ)知識(shí) , 值得多寫(xiě)幾次的
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)