轮播图实现

夜游

2019-04-26

效果

在全局作用域下使用关键字var所定义的变量会挂载到全局作用域下面；但是如果关键字let和const去定义一个变量的话那么就不会将其挂载到全局作用域下面。

1.通过css方式实现轮播

<div class="box">
  <ul class="list">
    <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556250897209&di=9f3f0f90962ec7a266df379146ba6d53&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F57ac3605353a8.jpg" alt="desc" /></li>
    <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556250942222&di=d5c2ff641738e31641f2d14014296363&imgtype=0&src=http%3A%2F%2Fpic50.nipic.com%2Ffile%2F20141017%2F13035204_161153741600_2.jpg" alt="desc" /></li>
    <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556250942222&di=b33e7d00c5cc92adde58a9a237c69506&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F202efff4f7e95e73eddf03bc1ac5432cf257c10e.jpg" alt="desc" /></li>
    <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556250942221&di=ca3bc55015797db7f08d8e053e83ab2c&imgtype=0&src=http%3A%2F%2Fnews.mydrivers.com%2FImg%2F20120217%2F2012021709492293.jpg" alt="desc" /></li>
    <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556250942220&di=b511fbeb99eab9e7882a11eab6f9d78e&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F27%2F103420lzrq3jcimigfjmuw.jpg" alt="desc" /></li>
  </ul>
</div>

<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 320px;
  height: 240px;
  overflow: hidden;
  position: relative;
  margin: 10px auto;
}
ul {
  list-style-type: none;
  width: 1600px;
  height: 240px;
  position: absolute;
  top: 0;
  left: 0;
  animation: banner 10s linear infinite;
}
li {
  float: left;
}
img {
  display: block;
  width: 320px;
  height: 240px;
}
@keyframes banner {
  0% {
    left: 0;
  }
  100% {
    left: -1280px;
  }
}
</style>

使用纯css制作轮播的缺点在于无法和用户实现交互效果。适用于纯展示的场景里面。

2.使用js进行交互

先看页面结构，如下所示：

<!-- 这是页面结构 -->
<div class="carousel">
  <div class="imgList">

  </div>

  <!-- 指示点容器 -->
  <div class="dotContainer">

  </div>

  <span class="arrow prev"><</span>
  <span class="arrow next">></span>
</div>

<!-- 这是页面的css -->
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
.carousel {
    width: 320px;
    height: 240px;
    overflow: hidden;
    margin: 20px auto;
    position: relative;
}
.carouselImg {
    display: block;
    width: 320px;
    height: 240px;
    float: left;
}
.imgList {
    position: absolute;
    width: 2240px;
    height: 240px;
    top: 0;
}
.arrow {
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
}
.prev {
    left: 5px;
}
.next {
    right: 5px;
}
.dotContainer {
    position: absolute;
    bottom: 10px;
    /* border: 2px solid red; */
    left: 50%;
    transform: translateX(-50%);
}
.dotClass {
    display: inline-block;
    font-size: 24px;
    background: #fff;
    background-clip: content-box;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    padding: 1px;
    border: 1px solid #fff;
    cursor: pointer;

}
.dotClassActive {
    background: orange;
    background-clip: content-box;
    border-color: orange;
}
.dotClass+.dotClass {
    margin-left: 3px;
}
</style>

<script type="text/javascript">
var animationDone = true;
var activeIndex = 1;
let imgs = [
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556250897209&di=9f3f0f90962ec7a266df379146ba6d53&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F57ac3605353a8.jpg', // -320
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556250942222&di=d5c2ff641738e31641f2d14014296363&imgtype=0&src=http%3A%2F%2Fpic50.nipic.com%2Ffile%2F20141017%2F13035204_161153741600_2.jpg', // -640
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556250942222&di=b33e7d00c5cc92adde58a9a237c69506&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F202efff4f7e95e73eddf03bc1ac5432cf257c10e.jpg', // -960
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556250942221&di=ca3bc55015797db7f08d8e053e83ab2c&imgtype=0&src=http%3A%2F%2Fnews.mydrivers.com%2FImg%2F20120217%2F2012021709492293.jpg', // -1280
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556250942220&di=b511fbeb99eab9e7882a11eab6f9d78e&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F27%2F103420lzrq3jcimigfjmuw.jpg', // -1600
];

/** 设置imgList的初始left */
function initLeft (dom) {
    let imgEle = document.querySelector('.carouselImg');
    window.imgWidth = imgEle.clientWidth;
    dom.style.left = -window.imgWidth + 'px';
}

/** 图片运动的动画方法 */
function animate (interval, speed, dom, newLeft) {
    window.animationDone = false;
    if ((speed > 0 && parseInt(dom.style.left) < newLeft) || (speed < 0 && parseInt(dom.style.left) > newLeft)) {       // 判断是否有运动的必要
        dom.style.left = parseInt(dom.style.left) + speed + 'px';
        window.animateId = setTimeout(function () {
            animate(interval, speed, dom, newLeft);
        }, interval);
    } else {                                // 说明已经运动到了指定的newLeft位置了
        window.animationDone = true;        // 已经完成轮播动画
        let doneLeft = parseInt(dom.style.left);
        if (doneLeft < -(imgs.length-2) * window.imgWidth) dom.style.left = -window.imgWidth + 'px';
        if (doneLeft > -window.imgWidth) dom.style.left = -(imgs.length-2) * window.imgWidth + 'px';
    }
}

/** 轮播运动事件调用方法，向左运动和向右运动需要区别对待处理 */
function carouselRun (dom, offset) {
    let currentLeft = parseInt(document.querySelector('.imgList').style.left);

    let speed = offset / 10 / 16;
    let newLeft = currentLeft + offset;

    animate(10, speed, dom, newLeft);
}

/** 实现图片自动轮播，自动轮播是从左到右的 */
function autoRun (next) {
    window.autoRunTid = setInterval(function () {
        next.click();
    }, 2000);
}

function stop () {
  clearInterval(window.autoRunTid);
}

window.onload = function () {
    let imgList = document.querySelector('.imgList');
    let container = document.querySelector('.carousel');
    let prev = document.querySelector('.prev');
    let next = document.querySelector('.next');
    imgs.push(imgs[0]); imgs.unshift(imgs[imgs.length-1]);
    for (let i = 0, len = imgs.length; i < len; i++) {
        let img = document.createElement('img');
        img.setAttribute('src', imgs[i]);
        img.setAttribute('alt', `desc${i}`);
        img.setAttribute('class', 'carouselImg');
        imgList.appendChild(img);
    }
    initLeft(imgList);
    initDot();
    setActiveDot();

    prev.addEventListener('click', function () {
        if (!window.animationDone) return;
        if (window.activeIndex < 1) { window.activeIndex = imgs.length-2; }
        else { window.activeIndex--; }
        setActiveDot();
        carouselRun(imgList, window.imgWidth);
    });

    next.addEventListener('click', function () {
        if (!window.animationDone) return;
        if (window.activeIndex >= imgs.length-2) { window.activeIndex = 1; }
        else { window.activeIndex++; }
        setActiveDot();
        carouselRun(imgList, -window.imgWidth);
    })

    container.onmouseover = stop;
    container.ommouseout = () => {autoRun(next)};
};

/** 初始化指示点的状态 */
function initDot () {
    let dotWrapper = document.querySelector('.dotContainer');
    /** 1.生成指定个点 */
    for (let i = 0, len = imgs.length - 2; i < len; i++) {
        let span = document.createElement('span');
        span.setAttribute('index', i+1);
        span.setAttribute('class', 'dotClass');
        dotWrapper.appendChild(span);
    }
}

/** 设置处于焦点状态的指示点 */
function setActiveDot () {
    let dotAll = document.getElementsByClassName('dotClass');
    for (let i = 0, len = dotAll.length; i < len; i++) {
        let classList = dotAll[i].classList;
        if (classList.contains('dotClassActive')) {
            classList.remove('dotClassActive');
            break;
        }
    }
    dotAll[window.activeIndex-1].classList.add('dotClassActive');
}
</script>