記錄：完整版輪播圖

時間  2021-01-05
標籤 css html c++ app this spa htm 對象 索引 seo 欄目 CSS 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }

    .all {
      width: 500px;
      height: 200px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }

    .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: 0px;
      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;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }

    .all ol li.current {
      background: #DB192A;
    }

    #arr {
      display: none;
    }

    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑體';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }

    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="all" id='box'>
  <div class="screen"><!--相框-->
    <ul>
      <li><img src="images/1.jpg" width="500" height="200"/></li>
      <li><img src="images/2.jpg" width="500" height="200"/></li>
      <li><img src="images/3.jpg" width="500" height="200"/></li>
      <li><img src="images/4.jpg" width="500" height="200"/></li>
      <li><img src="images/5.jpg" width="500" height="200"/></li>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>
<script>
  //獲取最外面的div
  var box = my$("box");
  //獲取相框
  var screen = box.children[0];
  //獲取相框的寬度
  var imgWidth = screen.offsetWidth;
  //獲取ul
  var ulObj = screen.children[0];
  //獲取ul中的全部的li
  var list = ulObj.children;
  //獲取ol
  var olObj = screen.children[1];
  //焦點的div
  var arr = my$("arr");

  var pic = 0;//全局變量
  //建立小按鈕----根據ul中的li個數
  for (var i = 0; i < list.length; i++) {
    //建立li標籤,加入到ol中
    var liObj = document.createElement("li");
    olObj.appendChild(liObj);
    liObj.innerHTML = (i + 1);
    //在每一個ol中的li標籤上添加一個自定義屬性,存儲索引值
    liObj.setAttribute("index", i);
    //註冊鼠標進入事件
    liObj.onmouseover = function () {
      //先幹掉全部的ol中的li的背景顏色
      for (var j = 0; j < olObj.children.length; j++) {
        olObj.children[j].removeAttribute("class");
      }
      //設置當前鼠標進來的li的背景顏色
      this.className = "current";
      //獲取鼠標進入的li的當前索引值
      pic = this.getAttribute("index");
      //移動ul
      animate(ulObj, -pic * imgWidth);
    };
  }
  //設置ol中第一個li有背景顏色
  olObj.children[0].className = "current";


  //克隆一個ul中第一個li,加入到ul中的最後=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  //自動播放
 var timeId= setInterval(clickHandle,1000);

  //鼠標進入到box的div顯示左右焦點的div
  box.onmouseover = function () {
    arr.style.display = "block";
    //鼠標進入廢掉以前的定時器
    clearInterval(timeId);
  };
  //鼠標離開到box的div隱藏左右焦點的div
  box.onmouseout = function () {
    arr.style.display = "none";
    //鼠標離開自動播放
    timeId= setInterval(clickHandle,1000);
  };
  //右邊按鈕
  my$("right").onclick =clickHandle;
  function clickHandle() {
    //若是pic的值是5,恰巧是ul中li的個數-1的值,此時頁面顯示第六個圖片,而用戶會認爲這是第一個圖,
    //因此,若是用戶再次點擊按鈕,用戶應該看到第二個圖片
    if (pic == list.length - 1) {
      //如何從第6個圖,跳轉到第一個圖
      pic = 0;//先設置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置還原成開始的默認位置
    }
    pic++;//馬上設置pic加1,那麼此時用戶就會看到第二個圖片了
    animate(ulObj, -pic * imgWidth);//pic從0的值加1以後,pic的值是1,而後ul移動出去一個圖片
    //若是pic==5說明,此時顯示第6個圖(內容是第一張圖片),第一個小按鈕有顏色,
    if (pic == list.length - 1) {
      //第五個按鈕顏色幹掉
      olObj.children[olObj.children.length - 1].className = "";
      //第一個按鈕顏色設置上
      olObj.children[0].className = "current";
    } else {
      //幹掉全部的小按鈕的背景顏色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
      }
      olObj.children[pic].className = "current";
    }

  };
  //左邊按鈕
  my$("left").onclick = function () {
    if (pic == 0) {
      pic = 5;
      ulObj.style.left = -pic * imgWidth + "px";
    }
    pic--;
    animate(ulObj, -pic * imgWidth);
    //設置小按鈕的顏色---全部的小按鈕幹掉顏色
    for (var i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    //當前的pic索引對應的按鈕設置顏色
    olObj.children[pic].className = "current";

  };

  //設置任意的一個元素,移動到指定的目標位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定時器的id值存儲到對象的一個屬中
    element.timeId = setInterval(function () {
      //獲取元素的當前的位置,數字類型
      var current = element.offsetLeft;
      //每次移動的距離
      var step = 10;
      step = current < target ? step : -step;
      //當前移動到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定時器
        clearInterval(element.timeId);
        //直接到達目標
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>
</body> 
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程