輪播圖

css部分

.page {
  width: 740px;
  height: 350px;
  float: left;
  margin: 10px 10px 0 10px;
  overflow: hidden;
  position: relative;
}

.page ul {
  position: absolute;
  left: 0;
}

.lli {
  float: left;
}

.uul {
  width: 900%;
  height: 100%;
}

.d-ol {
  position: absolute;
  right: 12px;
  bottom: 12px;
  height: 19px
}

.ool {
  list-style-type: none;
}

.ool li {
  float: left;
}

.ool li span {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  margin-left: 7px;
  color: #333;
  text-align: center;
  cursor: pointer;
  background: url(../images/imgPlayer.png) no-repeat -28px -90px;
}

li.active span {
  color: #fff;
  background-position: 0 -90px;
}

.prev {
  display: none;
  background: url(../images/newx-flash.png) no-repeat 0 0;
  left: 20px;
  width: 36px;
  cursor: pointer;
  position: absolute;
  top: 152px;
  height: 50px;
  overflow: hidden;
}

.next {
  display: none;
  background: url(../images/newx-flash.png) no-repeat -47px 0;
  right: 10px;
  width: 36px;
  cursor: pointer;
  position: absolute;
  top: 152px;
  height: 50px;
  overflow: hidden;
}


複製代碼

html部分

<div class="page">
          <ul class="uul">
            <li class="lli"><img src="./images/l1.jpg" alt=""></li>
            <li class="lli"><img src="./images/l2.jpg" alt=""></li>
            <li class="lli"><img src="./images/l3.jpg" alt=""></li>
            <li class="lli"><img src="./images/l4.jpg" alt=""></li>
            <li class="lli"><img src="./images/l5.jpg" alt=""></li>
            <li class="lli"><img src="./images/l6.jpg" alt=""></li>
            <li class="lli"><img src="./images/l7.jpg" alt=""></li>
            <li class="lli"><img src="./images/l8.jpg" alt=""></li>
            <li class="lli"><img src="./images/l1.jpg" alt=""></li>

          </ul>
          <div class="d-ol">
            <ol class="ool">
              <li class="active"><span>1</span></li>
              <li><span>2</span></li>
              <li><span>3</span></li>
              <li><span>4</span></li>
              <li><span>5</span></li>
              <li><span>6</span></li>
              <li><span>7</span></li>
              <li><span>8</span></li>

            </ol>
          </div>
          <i class="prev"></i>
          <i class="next"></i>


        </div>
          <script src="./js/animate.js"></script>


複製代碼

js部分，以前分享了一個封裝的動畫函數 這裏須要引入一下 主要思路就是 根據動畫函數 每兩秒讓 定義的i加一 這樣每兩秒他就換到了一個新的圖片 多了一張圖片是爲了實現無縫輪播 在顯示最後一張圖片以後 讓他下一張顯示第一張圖片 緊接着讓整個ul的left=0 他會瞬間回到第一張圖片 這樣 就完成了 從頭開始的操做 。

var oView = document.querySelector('.page');

var viewWidth = oView.offsetWidth;
// 3.獲取ul
var uUl = document.querySelector('.uul');
console.log(uUl);

var uLi = document.querySelectorAll('.lli');
//獲取下面的圓點
var oOl = document.querySelector('.ool');
var oLi=document.querySelectorAll('.ool li')

var prevBtn = document.querySelector('.prev');

var nextBtn = document.querySelector('.next');

var num = 0;

var timeId = setInterval(fn, 1500)
//圖片運動的方法

function fn() {

  if (num == uLi.length - 1) {

    num = 0;

    uUl.style.left = 0 + 'px';
  }

  num++;

  animate(uUl, -num * viewWidth);
// 焦點樣式
  if (num > oLi.length - 1) {

      oLi[oLi.length-1].className = "";

      oLi[0].className = 'active';
  } else {
   
    for (var j = 0; j < oLi.length; j++) {

      oLi[j].removeAttribute('class');
    }


    oLi[num].className = 'active';
  }

  
}
// 下一張圖片

nextBtn.onclick = fn;

// 上一張圖片
prevBtn.onclick = function () {
  if (num == 0) {
    num = uLi.length - 1;
    uUl.style.left = -num * viewWidth + 'px';
  }

  num--;
 
  animate(uUl, -num * viewWidth);



  for (var j = 0; j < oLi.length; j++) {

    oLi[j].removeAttribute('class');
  }


  oLi[num].className = 'active';
}
// 點擊按鈕換圖片
for (var i = 0; i < oLi.length; i++) {
  (function (i) {
    oLi[i].onclick = function () {
      // var dis = index - i;
      console.log(i);
    
      for (var j = 0; j < oLi.length; j++) {
        oLi[j].className = ' ';

      }
      this.className = 'active';
      uUl.style.left = -i * viewWidth + 'px'
      // console.log(this.index);
                // clearInterval(timeId);
                
    /*這裏讓num=i 是爲了解決當點擊下面的小圓點 圖片雖然會跳轉到  對應的圖片位置
    可是 當移出以後 輪播圖會回到 原來中止的位置 繼續播放  可是當我讓 圓點的索引和
    圖片的索引相等的時候 他會在當前位置繼續播放
    *／
      num = i;

    
    }
  })(i)

}
// 鼠標移入 讓輪播圖暫停
oView.onmouseover = function () {
  clearInterval(timeId);
  prevBtn.style.display = 'block';
  nextBtn.style.display = 'block';

  
}
// 鼠標移出 讓輪播圖繼續
oView.onmouseout = function () {
  timeId = setInterval(fn, 1500);
  prevBtn.style.display = 'none';
  nextBtn.style.display = 'none';

}

複製代碼