溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

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

如何使用JavaScript實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果

發(fā)布時(shí)間:2021-04-13 11:40:08 來源:億速云 閱讀:212 作者:小新 欄目:web開發(fā)

小編給大家分享一下如何使用JavaScript實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!

具體實(shí)現(xiàn)代碼如下所示:

實(shí)現(xiàn)效果:

如何使用JavaScript實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果

實(shí)現(xiàn)原理:

// 步驟
// 1. 獲取事件源以及相關(guān)元素
// 2. 復(fù)制第一張圖片所在的li,添加到ul的最后面
// 3. 給ol添加li,ul中的個(gè)數(shù)-1個(gè),并點(diǎn)亮第一個(gè)按鈕
// 4. 鼠標(biāo)放到ol的li上切換圖片
// 5. 添加定時(shí)器
// 6. 左右切換圖片(鼠標(biāo)放上去隱藏,移開顯示)

實(shí)現(xiàn)代碼:

<!DOCTYPE html>
<html>
<head>
  <title>輪播圖</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
    .all{
      width: 500px;
      height: 200px;
      padding: 7px;
      margin: 100px auto;
      position: relative;
      box-shadow: 1px 1px 5px #2d2d2d;
    }
    .screen{
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .screen li{
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }
    .screen ul{
      position: absolute;
      left: 0;
      top: 0;
      width: 3000px;
    }
    .all ol{
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
    .all ol li{
      float: left;
      width: 20px;
      height: 20px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }
    .all ol li.current{
      background-color: #03c03c;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      left: 5px;
      top: 50%;
      position: absolute;
      margin-top: -20px;
      background-color: #000;
      cursor: pointer;
      line-height: 35px;
      text-align: center;
      font-weight: bold;
      font-family: "微軟雅黑";
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border-radius: 50%;
      box-shadow: 1px 1px 3px #2d2d2d;
    }
    #arr #right{
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="all" id="all">
  <div class="screen" id="screen">
    <ul id="ul">
      <li><img src="./images/01.jpg" width="500" height="200"></li>
      <li><img src="./images/02.jpg" width="500" height="200"></li>
      <li><img src="./images/03.jpg" width="500" height="200"></li>
      <li><img src="./images/04.jpg" width="500" height="200"></li>
      <li><img src="./images/05.jpg" width="500" height="200"></li>
    </ul>
    <!-- 圖片子菜單 -->
    <ol>
    </ol>
    <!-- 左右切換按鈕 -->
    <div id="arr">
      <span id="left"><</span>
      <span id="right">></span>
    </div>
  </div>
</div>
<!-- script -->
<script type="text/javascript">
  // 賦值第一張圖片放到ul的最后,當(dāng)圖片切換到第五張的時(shí)候,直接切換第六張,再從第一張切換到第二張的時(shí)候先瞬間切換到第一張圖片,然后滑倒第二張
  // 步驟
  // 1. 獲取事件源以及相關(guān)元素
  // 2. 復(fù)制第一張圖片所在的li,添加到ul的最后面
  // 3. 給ol添加li,ul中的個(gè)數(shù)-1個(gè),并點(diǎn)亮第一個(gè)按鈕
  // 4. 鼠標(biāo)放到ol的li上切換圖片
  // 5. 添加定時(shí)器
  // 6. 左右切換圖片(鼠標(biāo)放上去隱藏,移開顯示)
  // 1. 獲取事件源以及相關(guān)元素
  var all = document.getElementById("all");
  var screen = all.firstElementChild || all.firstChild;
  var imgWidth = screen.offsetWidth;
  var ul = screen.firstElementChild || screen.firstChild;
  var ol = screen.children[1];
  var div = screen.lastElementChild || screen.lastChild;
  var spanArr = div.children;
  // 2. 復(fù)制第一張圖片所在的li,添加到ul的最后面
  var ulNewLi = ul.children[0].cloneNode(true);
  ul.appendChild(ulNewLi);
  // 3. 給ol添加li,ul中的個(gè)數(shù)-1個(gè),并點(diǎn)亮第一個(gè)按鈕
  for(var i=0; i<ul.children.length-1; i++){
    var olNewLi = document.createElement("li");
    olNewLi.innerHTML = i+1;
    ol.appendChild(olNewLi);
  } 
  var olLiArr = ol.children;
  olLiArr[0].className = "current";
  // 4. 鼠標(biāo)放到ol的li上切換圖片
  for(var i=0; i<olLiArr.length; i++){
    // 自定義屬性,把索引值綁定到元素的index屬性上
    olLiArr[i].index = i;
    olLiArr[i].onmouseover = function(){
      // 排他思想
      for(var j=0; j<olLiArr.length; j++){
        olLiArr[j].className = "";
      }
      this.className = "current"
      // 鼠標(biāo)放到小方塊上時(shí),索引值和key以及square同步
      // key = this.index;
      // square = this.index;
      key = square = this.index;
      // 移動(dòng)盒子
      animate(ul, -this.index*imgWidth);
    }
  }
  // 5. 添加定時(shí)器
  var timer = setInterval(autoPlay, 1000);
  // 固定向右切換圖片
  // 兩個(gè)定時(shí)器(一個(gè)記錄圖片,一個(gè)記錄子菜單欄)
  var key = 0;
  var square = 0;
  function autoPlay(){
    // 通過key的自增來模擬圖片的索引值,然后移動(dòng)ul
    key++;
    if(key > olLiArr.length){
      // 圖片已經(jīng)滑到最后一張,接下來應(yīng)該跳轉(zhuǎn)到第一張,然后滑動(dòng)到第二張
      ul.style.left = 0;
      key = 1;
    }
    animate(ul, -key*imgWidth);
    // 通過控制square的自增來模擬小方塊的索引值,然后點(diǎn)亮盒子
    // 排他思想做小方塊
    square++;
    if(square > olLiArr.length-1){
      // 索引值不能大于5,如果大于5則立即變?yōu)?;
      square = 0;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  // 鼠標(biāo)放上去清除定時(shí)器,移開啟動(dòng)定時(shí)器
  all.onmouseover = function(){
    div.style.display = "block";
    clearInterval(timer);
  }
  all.onmouseout = function(){
    div.style.display = "none";
    timer = setInterval(autoPlay,1000);
  }
  // 6. 左右切換圖片(鼠標(biāo)放上去顯示,移開隱藏)
  spanArr[0].onclick = function(){
    // 通過控制key的自增來模擬圖片的索引值,然后移動(dòng)ul
    key--;
    if(key<0){
      // 先移到最后一張,然后key的值取前一張的索引值,然后向前移動(dòng)
      ul.style.left = -imgWidth*(olLiArr.length) + "px";
      key = olLiArr.length-1;
    }
    animate(ul, -key*imgWidth);
    // 通過控制square的自增來模擬小方塊的索引值,然后點(diǎn)亮小方塊
    square--;
    if(square<0){
      // 索引值不能大于等于5,如果為5,立即變?yōu)?
      square = olLiArr.length-1;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  spanArr[1].onclick = function(){
    // 右側(cè)的和定時(shí)器一模一樣
    autoPlay();
  }
  // 動(dòng)畫封裝
  var absSpeed = 10; //設(shè)定步長
  function animate(ele, target){
    clearInterval(ele.timer);
    var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
    ele.timer = setInterval(function(){
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      if(Math.abs(val) < Math.abs(speed)){
        ele.style.left = target + "px";
        clearInterval(ele.timer);
      }
    }, 10)
  }
</script>
</body>
</html>

看完了這篇文章,相信你對“如何使用JavaScript實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!

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

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

AI