轮播图（幻灯效果）的实现

轮播图原理

第一种实现：将一系列大小相同的图片平铺，利用CSS布局只显示一张图片，其余隐藏，通过计算偏移量，更改图片容器的left值，利用定时器实现自动 播放，或手动点击事件切换图片。

第二种实现：通过改变图片的display值，显示与否，实现轮播。或者通过改变透明度。

1.建立HTNL基本布局

<div id="container">
	<div id="wrap" style="left:0">
		<img src="./img/1.jpg" alt="">
		<img src="./img/2.jpg" alt="">
		<img src="./img/3.jpg" alt="">
		<img src="./img/4.jpg" alt="">
		<img src="./img/5.jpg" alt="">
	</div>

	<div id="buttons">
		<span class="on">1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
	</div>
	<div id="arrows">
		<a href="javascript:;" class="arrow" id="arrow_left">&lt;</a>
		<a href="javascript:;" class="arrow" id="arrow_right">&gt;</a>
	</div>
</div>

2.CSS样式

*{
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}

#container{
  position:relative;
  width: 400px;
  height: 400px;
  margin: 100px auto 0 auto;
  box-shadow: 0 0 5px green;
  overflow:hidden; 
}

img{
  width: 400px;
  height: 400px;
  float:left;
}

#wrap{
  position: absolute;
  width: 2000px;
  height: 400px;
  z-index: 1;
}

#buttons{
  position: absolute;
  left: 10px;
  bottom: 20px;
  width: 150px;
  height: 10px;
  z-index: 2;
}
#buttons span{
  border:1px solid #000;
  background: #000;
  color:#fff;
  padding:0 5px;
}
#buttons span.on{
  background: orange;
  color:#000;
}

#arrows{
  position: absolute;
  right: 10px;
  bottom: 20px;
  width:80px;
  height: 10px;
  z-index: 2;
}
#arrows a{
  border:1px solid #000;
  background: #000;
  color:#fff;
  padding:0 5px;
}

3.JS代码

var wrap = document.getElementById("wrap");
var prev = document.getElementById("arrow_left");
var next = document.getElementById("arrow_right");

prev.onclick = function(){
  prev_pic();
};

next.onclick = function(){
  next_pic();
};

function prev_pic(){
  var newleft;
  if(wrap.style.left == "0px"){
    newleft = -1600;
  }else{
    newleft = parseInt(wrap.style.left) + 400;
  }
  console.log(newleft);
  wrap.style.left = newleft + "px";

  index--;
  if(index<0){
    index = 4;
  }
  showCurrnetDot();
};

function next_pic(){
  var newleft ;
  if(wrap.style.left == "-1600px"){
    newleft = 0;
  }else{
    newleft = parseInt(wrap.style.left) - 400;
  }

  console.log(newleft);
  wrap.style.left = newleft + "px";

  index++;
  if(index>4){
    index = 0;
  }
  showCurrnetDot();
};

var timer = null;
function autoplay(){
  timer = setInterval(next_pic, 2000);
}

autoplay();

var index = 0;
var dots = document.getElementsByTagName("span");

function showCurrnetDot(){
  for(var i=0;i<dots.length;i++){
    dots[i].className = "";
  }
  dots[index].className = "on";
}

for(var i=0;i<dots.length;i++){
  (function(i){
    dots[i].onclick = function(){
      wrap.style.left = (i*(-400)) + "px";
      index  = i;
      showCurrnetDot();
    }
  })(i);

}

var container = document.getElementById("container");
container.onmouseover = function(){
  clearInterval(timer);
}
container.onmouseout = function(){
  autoplay();
}

第二种实现:

<div id="container">
	<div id="imgs">
		<img src="pic0.jpg" alt="" class="active">
		<img src="pic1.jpg" alt="">
		<img src="pic2.jpg" alt="">
		<img src="pic3.jpg" alt="">
	</div>
	<ul id="list">
		<li class="active">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<ul id="arrow">
		<li id="prev">&lt;</li>
		<li id="next">&gt;</li>
	</ul>
</div>

#container{
  width: 533px;
  height: 300px;
  position: relative;
}
#imgs img{
  width: 533px;
  height: 300px;
  display: none;
}
#imgs .active{
  display: block;
}
#list{
  width: 100px;
  height: 20px;
  position: absolute;
  right: 3px;
  bottom: 5px;
}
#list li{
  width: 20px;
  height: 20px;
  margin-right: 5px;
  text-align: center;
  line-height: 20px;
  background: #000;
  color: #fff;
  cursor: pointer;
  float: left;
}
#list li.active{
  background: orange;
}
#arrow{
  width: 50px;
  height: 20px;
  position: absolute;
  left: 3px;
  bottom: 5px;
}
#arrow li{
  width: 20px;
  height: 20px;
  margin-right: 5px;
  text-align: center;
  line-height: 20px;
  background: #000;
  color: #fff;
  cursor: pointer;
  float: left;
}

var oContainer = document.getElementById('container');
var oImg = document.getElementById('imgs');
var aImgs = oImg.getElementsByTagName('img');
var oList = document.getElementById('list');
var aLi = oList.getElementsByTagName('li');
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var index = 0;
var timer;

for(var i=0;i<aLi.length;i++){
	aLi[i].index = i;
	aLi[i].onmouseover = function(){
		/*for(var j=0;j<aLi.length;j++){
			aImgs[j].className = '';
			aLi[j].className = '';
		}
		this.className = 'active';
		aImgs[this.index].className = 'active';*/
		changeImg(this.index);
		index = this.index;
	};
}

oPrev.onclick = function(){
	if(index<=0){
		index=4;
	}
	changeImg(--index);
};
oNext.onclick = function(){						
	if(index>=3){
		index=-1;
	}
	changeImg(++index);
};

function changeImg(idx){
	for(var j=0;j<aLi.length;j++){
			aImgs[j].className = '';
			aLi[j].className = '';
	}
	aLi[idx].className = 'active';
	aImgs[idx].className = 'active';
}

function play(){
	timer = setInterval(function(){
		oNext.onclick();
	},1000);			
}

play();
oContainer.onmouseover = function(){
	clearInterval(timer);
};
oContainer.onmouseout = function(){
	play();
};