JS实现轮播图思路整理

html结构层

<div class="index-banner" id="banner">
  <div class="banner-list" id="banner_list" style="left: -1610px">
    <a href="http://www.icourse163.org/" class="banner3" target="_blank"></a>
    <a href="http://open.163.com/" class="banner1" target="_blank"></a>
    <a href="http://study.163.com/" class="banner2" target="_blank"></a>
    <a href="http://www.icourse163.org/" class="banner3" target="_blank"></a>
    <a href="http://open.163.com/" class="banner1" target="_blank"></a>
  </div>
  <div class="slide" id="slideBtn">
    <span index="1" class="active"></span>
    <span index="2"></span>
    <span index="3"></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow"><</a>
  <a href="javascript:;" id="next" class="arrow">></a>
</div>

css表现层

.index-banner {
	position: relative;
	width: 1610px;
	height: 461px;
	margin: 0 auto;
	overflow: hidden;
}

.index-banner .banner-list {
	position: absolute;
	width: 8050px;
	height: 461px;
	z-index: 1;
}

.index-banner .banner-list a {
	display: block;
	float: left;
	width: 1610px;
	height: 461px;
}

.banner1 {
	background: url("../images/banner1.jpg") no-repeat;
}

.banner2 {
	background: url("../images/banner2.jpg") no-repeat;
}

.banner3 {
	background: url("../images/banner3.jpg") no-repeat;
}

.index-banner .slide {
	position: absolute;
	z-index: 2;
	left: 50%;
	margin-left: -5px;
	bottom: 20px;
}

.index-banner .slide span {
	display: inline-block;
	cursor: pointer;
	margin-right: 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #fff;
}

.index-banner .slide .active {
	background-color: #000;
}

.arrow {
	cursor: pointer;
	position: absolute;
	z-index: 2;
	top: 180px;
	display: none;
	line-height: 70px;
	text-align: center;
	vertical-align: middle;
	font-size: 35px;
	font-weight: bold;
	width: 50px;
	height: 70px;
	background-color: RGBA(0,0,0,.3);
	color: #fff;
}

.arrow:hover {
	background-color: RGBA(0,0,0,.7);
}

.index-banner:hover .arrow {
	display: block;
}

#prev {
	left: 20px;
}

#next {
	right: 20px;
}

JS实现原理：通过改变图片的偏移量来实现图片的切换

实现步骤：1、通过documnet.getElementById()获取页面需要操作的元素

window.onload = function () {
  var banner = document.getElementById("banner"); //获取轮播图父容器；
  var list = document.getElementById("banner_list"); //获取图片列表；
  var buttons = document
    .getElementById("slideBtn")
    .getElementsByTagName("span"); //获取图片切换圆点按钮；
  var pre = document.getElementById("prev"); //获取向左切换箭头
  var next = document.getElementById("next"); //获取向右切换箭头；

2、实现左右箭头的切换：给左右箭头绑定点击事件；

问题：在左右切换过程中会在图片切换完会显示空白？

解决方法：使用无限滚动的技巧，即实现循环无缝切换：

1)在页面图片列表的开始加上最后一张图片的附属图，在最后加上第一张图片的附属图

2)每次切换时判断切换后的位置是否大于-1610px或是小于-4830px（即是否切换到附属图的位置）：

如果大于-1610px,就把图片重新定位到真正的最后一张图的位置：-4830px;

如果小于-4830px,就把图片重新定位到真正的第一张图的位置：-1610px;

var index = 1; //用于存放当前要显示的图片，初始值为第一张图片
var animated = false; //优化动画执行效果，只有当前切换动画未执行时，才能被执行。解决当前动画执行未完成时，多次点击切换按钮导致的页面卡图现象，初始值为false

pre.onclick = function () {
  //切换到当前图片左边的图片，如果当前是第一张，会切换到最后一张
  if (index == 1) {
    index = 3;
  }
  //否则会切换到前一张，即index-1
  else {
    index -= 1;
  }
  //每次点击时，判断animated为false时执行切换
  if (!animated) {
    animate(1610);
  }

  //设置当前圆点按钮样式切换到选中状态，其他圆点为未选中状态
  showBtn();
};
next.onclick = function () {
  //切换到当前图片右边的图片，如果当前是最后一张，会切换到第一张
  if (index == 3) {
    index = 1;
  }
  //否则会切换到下一张，即index+1
  else {
    index += 1;
  }
  //每次点击时，判断animated为false时执行动画
  if (!animated) {
    animate(-1610);
  }
  //设置当前圆点按钮样式切换到选中状态，其他圆点为未选中状态
  showBtn();
};

//将偏移的动作封装到函数animate()中
function animate(offset) {
  animated = true; //调用animate()切换时设置为true;
  var newleft = parseInt(list.style.left) + offset; //偏移之后的位置
  var time = 500; //位移总时间
  var interval = 10; //位移间隔时间
  var speed = offset / (time / interval); //每次位移量 =总偏移量/次数

  function go() {
    //递归，在函数内部调用自身实现入场图片500ms淡入的效果
    //判断偏移量是否达到了目标值，如果没有，在原来的基础上继续移动
    if (
      (speed < 0 && parseInt(list.style.left) > newleft) ||
      (speed > 0 && parseInt(list.style.left) < newleft)
    ) {
      list.style.left = parseInt(list.style.left) + speed + "px";
      //设置定时器，每隔interval的时间调用一下go()函数
      //setTimeout()函数只会被执行一次
      setTimeout(go, interval);
    }
    //如果达到了目标值，就将newleft值设置为目标值，
    else {
      animated = false; //切换结束，设置为false;

      //获取当前图片的left值：用list.style.left获取left的字符串，需要parseInt()函数将字符串转换为数值
      list.style.left = newleft + "px";

      //设置无缝切换
      if (newleft > -1610) {
        list.style.left = "-4830px";
      }
      if (newleft < -4830) {
        list.style.left = "-1610px";
      }
    }
  }
  go(); //调用animate()时执行go()函数
}

//将圆点按钮样式切换封装到showBtn()函数中
function showBtn() {
  //遍历圆点按钮数组
  for (var i = 0; i < buttons.length; i++) {
    var button = buttons[i];
    //取消之前按钮设置的active状态
    if (button.className == "active") {
      button.className = "";
      break;
    }
  }
  //设置当前图片对应的圆点按钮状态为active
  buttons[index - 1].className = "active";
}

3、实现圆点按钮点击切换：遍历底部圆点按钮数组，为每个按钮添加点击事件

for (var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  button.onclick = function () {
    //程序优化：如果点击当前处于active状态的按钮，则不执行任何操作
    if (this.className == "active") {
      return; //当程序执行到这里时会退出当前函数，不会再执行后面的语句
    }
    //问题：如何在点击圆点按钮时，定位切换到对应的图片上？
    //解决方法：获取html页面按钮上自定义的index属性值，通过该index值可以算出每次点击的按钮距之前按钮的偏移量，
    var myIndex = parseInt(this.getAttribute("index")); //获取自定义的属性的值并转换为数字
    var offset = -1610 * (myIndex - index); //算出偏移量
    if (!animated) {
      animate(offset); //调用animate实现切换
    }
    index = myIndex; //更新当前的index值
    showBtn(); //调用showBtn实现按钮的样式切换
  };
}

4、实现图片自动切换：实现每5s切换图片，图片循环播放；

  var timer; //设置自动播放的定时器
  function play() {
    //设置定时器，每隔5s点击右键头切换按钮
    timer = setInterval(function () {
      next.onclick();
    }, 5000);
  }
  function stop() {
    //暂停自动播放
    clearInterval(timer);
  }

  banner.onmouseover = stop; //鼠标悬停某张图片，则暂停切换；
  banner.onmouseout = play; //鼠标移除时，继续自动切换；

  play(); //初始化时执行自动播放
}; //window.onload加载完成

使用jquery实现如下，思路不变：

$(function () {
  var banner = $("#banner");
  var list = $("#banner_list");
  var buttons = $("#slideBtn span");
  var prev = $("#prev");
  var next = $("#next");
  var index = 1;
  var interval = 5000;
  var timer;

  function animate(offset) {
    var left = parseInt(list.css("left")) + offset;
    if (offset > 0) {
      offset = "+=" + offset;
    } else {
      offset = "-=" + Math.abs(offset);
    }
    list.animate({ left: offset }, 500, function () {
      if (left > -1610) {
        list.css("left", -4830);
      }
      if (left < 4830) {
        list.css("left", -1610);
      }
    });
  }

  function showButton() {
    buttons
      .eq(index - 1)
      .addClass("active")
      .siblings()
      .removeClass("active");
  }

  function play() {
    timer = setTimeout(function () {
      next.trigger("click");
      play();
    }, interval);
  }
  function stop() {
    clearTimeout(timer);
  }

  next.bind("click", function () {
    if (list.is(":animated")) {
      return;
    }
    if (index == 3) {
      index = 1;
    } else {
      index += 1;
    }
    animate(-1610);
    showButton();
  });

  prev.bind("click", function () {
    if (list.is(":animated")) {
      return;
    }
    if (index == 1) {
      index = 3;
    } else {
      index -= 1;
    }
    animate(1610);
    showButton();
  });

  buttons.each(function () {
    $(this).bind("click", function () {
      if (list.is(":animated") || $(this).attr("class") == "active") {
        return;
      }
      var myIndex = parseInt($(this).attr("index"));
      var offset = -1610 * (myIndex - index);

      animate(offset);
      index = myIndex;
      showButton();
    });
  });

  banner.hover(stop, play);

  play();
});