轮播图

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';

}

复制代码