欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)輪播圖效果 純js實現(xiàn)圖片自動切換

 更新時間：2020年08月09日 10:41:09   作者：foreverどL  
這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖效果，圖片自動切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了純js實現(xiàn)圖片自動切換的具體代碼，供大家參考，具體內(nèi)容如下

1.鼠標經(jīng)過的時候左右兩個小按鈕會自動彈出，自動播放停止，點擊左右小按鈕可以切換圖片；
2. 鼠標離開，恢復(fù)自動播放；
3. 點擊下方中間幾個小圓圈，也會自動切換圖片；

源代碼：

<!DOCTYPE html>


<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }

  /* 輪播圖盒子樣式 */
  .lunbotu {
   position: relative;
   width: 520px;
   height: 280px;
   margin: 50px auto;
   background-color: blue;
   overflow: hidden;
  }

  /* 左右按鈕樣式 */
  .left,
  .right {
   display: none;
   position: absolute;
   top: 50%;
   margin-top: -15px;
   width: 30px;
   height: 30px;
   background-color: cornsilk;
   border-radius: 15px;
   text-align: center;
   line-height: 30px;
   cursor: pointer;
   z-index: 1;
  }

  .left {
   left: 0;
  }

  .right {

   right: 0;
  }


  li {
   list-style: none;
  }

  /* 設(shè)置圖片的ul的樣式 */
  .firstul {
   position: absolute;
   top: 0;
   left: 0;
   width: 500%;

  }

  .firstul li {
   float: left;
   /* display: none; */
  }

  /* 設(shè)置小圓圈的樣式 */
  ol {
   /* width: 90px; */
   padding: 0 5px 0 5px;
   position: absolute;
   bottom: 10px;
   left: 50%;
   margin-left: -45px;
   background-color: darkgrey;
   text-align: center;
   border-radius: 9px;
  }

  ol li {
   display: inline-block;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   margin-right: 5px;
   background-color: white;
   cursor: pointer;
  }

  .current {
   background-color: red;
  }
 </style>
 <script src="animation.js"></script>
</head>

<body>
 <!-- 圖片大小全部是520*280 -->
 <div class="lunbotu">
  <!-- 左右按鈕 -->
  <div class="left">></div>
  <div class="right"><</div>
    <!-- 圖片部分 -->
    <ul class="firstul">
     <li><a href=""><img src=" images/1.jpg" alt=""> </a></li>
     <li><a href=""><img src=" images/2.jpg" alt=""> </a></li>
     <li><a href=""><img src=" images/3.gif" alt=""> </a></li>
     <li><a href=""><img src=" images/4.webp" alt=""> </a></li>
    </ul>
    <!-- 小圓圈 -->
    <ol class="firstol"></ol>
  </div>
  <!-- JS部分 -->
  <script>
   // 1.獲取事件源
   var lunbotu = document.querySelector('.lunbotu');
   var leftBox = document.querySelector('.left');
   var rightBox = document.querySelector('.right');
   var ul = lunbotu.querySelector('ul');
   var ol = lunbotu.querySelector('ol');
   var right = document.querySelector('.right');
   var left = document.querySelector('.left');
   var lunbotuWidth = lunbotu.offsetWidth;
   // console.log(ul)
   // console.log(ol)
   // 第一步：
   // 鼠標經(jīng)過輪播圖的時候，左右小按鈕彈出
   lunbotu.addEventListener('mouseenter', function () {
    leftBox.style.display = 'block';
    rightBox.style.display = 'block';
    // 鼠標經(jīng)過輪播圖的時候，停止定時器
    clearInterval(timer);
   })
   // 鼠標離開輪播圖的時候，左右小按鈕隱藏
   lunbotu.addEventListener('mouseleave', function () {
    leftBox.style.display = 'none';
    rightBox.style.display = 'none';
    timer = setInterval(function () {
     right.click();
    }, 2000)

   })
   // 第二步：
   // 1.動態(tài)生成小圓圈
   // 2.小圓圈的個數(shù)要跟圖片一樣
   // 3.先得到ul里面圖片的張數(shù)(圖片放入li里面，所以就是li的個數(shù))
   // 4.利用循環(huán)動態(tài)生成小圓圈(這個小圓圈要放入ol里面)
   // 5.創(chuàng)建節(jié)點createElement('li')]
   // 6.插入節(jié)點ol.appendChild(li)
   // 7.第一個小圓圈需要添加current類
   for (var i = 0; i < ul.children.length; i++) {
    // 創(chuàng)建一個li
    var li = document.createElement('li')
    // 記錄當(dāng)前小圓圈的索引號 通過自定義屬性來做
    li.setAttribute('index', i);
    // 把li添加到ol
    ol.appendChild(li);
   }
   // 排他思想：讓小Li變白色
   for (var i = 0; i < ol.children.length; i++) {
    ol.children[i].addEventListener('click', function () {
     for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
     } this.className = 'current';

     // 點擊小圓圈的時候切換到對應(yīng)的圖片
     // 得到索引號 index
     var index = this.getAttribute('index');
     // 解決小bug
     num = index;
     num_ol = index;
     // console.log(lunbotuWidth);
     // console.log(index)
     animation(ul, - index * lunbotuWidth)
    })
   }
   // 給第一個li變顏色
   ol.children[0].className = 'current';
   // 克隆第一個li
   var first = ul.children[0].cloneNode(true);
   ul.appendChild(first);
   // 第三步:
   // 點擊右邊按鈕事件
   var num = 0;
   // 點擊右側(cè)按鈕的時候小圓圈跟著滾動
   var num_ol = 0;
   // 節(jié)流閥，防止點擊過快，最后才加這句優(yōu)化
   var flag = true;
   // 右側(cè)按鈕：
   right.addEventListener('click', function () {
    if (flag) {
     flag = false; // 關(guān)閉節(jié)流閥
     if (num == ul.children.length - 1) {
      ul.style.left = 0;
      num = 0;
     }
     num++;
     animation(ul, -num * lunbotuWidth, function () {
      flag = true;
     });
     num_ol++;
     if (num_ol == ol.children.length) {
      num_ol = 0
     }
     for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
     }
     ol.children[num_ol].className = 'current';
    }
   });
   // 左側(cè)按鈕：
   left.addEventListener('click', function () {
    if (flag) {
     flag = false;
     if (num == 0) {
      ul.style.left = -(ul.children.length - 1) * lunbotuWidth + 'px';
      num = ul.children.length - 1;
     }
     num--;
     animation(ul, -num * lunbotuWidth, function () {
      flag = true;
     });
     num_ol--;
     // num_ol=0的時候需要，點擊左側(cè)按鈕，需要轉(zhuǎn)跳到ol.children.length-1的位置
     if (num_ol < 0) {
      num_ol = ol.children.length - 1
     }
     for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
     }
     ol.children[num_ol].className = 'current';
    }
   });
   // 自動播放圖片
   var timer = setInterval(function () {
    right.click();
   }, 2000)
  </script>
</body>
</html>

5.Js文件的代碼

// 封裝了一個動畫js文件
function animation(obj,target,fn1){
 // console.log(fn1);
 // fn是一個回調(diào)函數(shù)，在定時器結(jié)束的時候添加
 // 每次開定時器之前先清除掉定時器
 clearInterval( obj.timer);
 obj.timer = setInterval(function(){
 // 步長計算公式 越來越小
 // 步長取整
 var step = (target - obj.offsetLeft) /10;
 step = step > 0 ? Math.ceil(step) :Math.floor(step); 

 if(obj.offsetLeft == target){
  clearInterval( obj.timer);
  // 如果fn1存在，調(diào)用fn
  if(fn1){
  fn1();
  }
 }else{
  // 每50毫秒就將新的值給obj.left
 obj.style.left = obj.offsetLeft +step +'px';
 }
 },30)
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • js中通過父級進行查找定位元素

    js中通過父級進行查找定位元素

    這篇文章主要介紹了js中如何通過父級進行查找定位元素,需要的朋友可以參考下
    2014-06-06
  • JS實現(xiàn)支持Ajax驗證的表單插件

    JS實現(xiàn)支持Ajax驗證的表單插件

    這篇文章主要為大家詳細介紹了JS實現(xiàn)支持Ajax驗證的表單插件，感興趣的小伙伴們可以參考一下
    2016-03-03
  • onbeforeunload與onunload事件異同點總結(jié)

    onbeforeunload與onunload事件異同點總結(jié)

    本文對onbeforeunload與onunload事件的異同點、觸發(fā)于、可以用在哪些元素以及解決刷新頁面時不調(diào)用onbeforeunload等等，感興趣的朋友可以參考下哈
    2013-06-06
  • JS繪圖Flot如何實現(xiàn)動態(tài)可刷新曲線圖

    JS繪圖Flot如何實現(xiàn)動態(tài)可刷新曲線圖

    這篇文章主要介紹了JS繪圖Flot如何實現(xiàn)動態(tài)可刷新曲線圖,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-10-10
  • 原生JavaScript創(chuàng)建不可變對象的方法簡單示例

    原生JavaScript創(chuàng)建不可變對象的方法簡單示例

    這篇文章主要介紹了原生JavaScript創(chuàng)建不可變對象的方法,結(jié)合簡單實例形式分析了基于原生JavaScript創(chuàng)建不可變對象的相關(guān)原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
    2020-05-05
  • JS簡單實現(xiàn)移動端日歷功能示例

    JS簡單實現(xiàn)移動端日歷功能示例

    這篇文章主要介紹了JS簡單實現(xiàn)移動端日歷功能的方法,涉及javascript針對日期與時間的操作及顯示相關(guān)技巧,需要的朋友可以參考下
    2016-12-12
  • Eclipse去除js(JavaScript)驗證錯誤

    Eclipse去除js(JavaScript)驗證錯誤

    這篇文章主要是對Eclipse去除js(JavaScript)驗證錯誤進行了介紹。在Eclipse中，js文件常常會報錯?？梢酝ㄟ^如下幾個步驟解決
    2014-02-02
  • JS實現(xiàn)簡易計算器

    JS實現(xiàn)簡易計算器

    這篇文章主要為大家詳細介紹了JS實現(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-02-02
  • JS將數(shù)字轉(zhuǎn)換成三位逗號分隔的樣式(示例代碼)

    JS將數(shù)字轉(zhuǎn)換成三位逗號分隔的樣式(示例代碼)

    本篇文章主要是對JS將數(shù)字轉(zhuǎn)換成三位逗號分隔的樣式(示例代碼)進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2014-02-02
  • echarts中tooltip添加點擊事件代碼示例

    echarts中tooltip添加點擊事件代碼示例

    這篇文章主要給大家介紹了關(guān)于echarts中tooltip添加點擊事件的相關(guān)資料,echarts tooltip點擊事件是指當(dāng)用戶點擊圖表中的提示框(tooltip)時觸發(fā)的事件,需要的朋友可以參考下
    2023-07-07

最新評論