原生js轮播图的实现

1. 轮播图总体分析



上面就是一个完整轮播图的整体效果图，可以从上分析，大致可以分为以下几个模块:

图片展示模块

右下角的数字导航

上一张，下一张

2. 轮播图具体分析

HTML布局，布局思路是:最外层的box是相对定位，imgbox正常布局，左右箭头采用绝对定位，来控制垂直居中，数字导航也采用绝对定位。

<!--最外层容器-->
<div class="box" id="box">
<!--图片容器-->
<div class="imgbox" id="imgbox">
<a href="#" class="show"><img src="img/img4.jpg" alt="img4"></a>
<a href="#" class="hide"><img src="img/img5.jpg" alt="img5"></a>
<a href="#" class="hide"><img src="img/img6.jpg" alt="img6"></a>
<a href="#" class="hide"><img src="img/img7.jpg" alt="img7"></a>
</div>

<!--左右箭头-->
<a class="prev" id="prev"><</a><a class="next" id="next">></a>

<!--数字导航-->
<div id="points" class="points">
<ul>
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>

css样式，要注意的就是设置inline-block后的空隙问题以及ie6,7兼容问题，绝对布局是相对有定位的父布局(除static外的布局)，html元素的垂直居中，具体看代码注释。

* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
display: block;
}

.box {
width: 186px;
height: 124px;
position: relative;
}

.imgbox {

font-size: 0;
/*解决inline-block的空隙问题*/
}

/*图片的显示控制*/
img {
width: 186px;
height: 124px;
display: block;
/*可以解决一些样式不一致问题*/
border: none;
}
/*数字导航容器定位*/
.points {
position: absolute;
right: 0px;
bottom: 5px;
font-size: 0;
}

.points ul {
list-style: none;
}

.points li {
border-left: 1px solid #fff;
display: inline-block;
*display: inline;
*zoom: 1;
}

/*数字导航正常样式*/
.points a {
width: 20px;
height: 20px;
line-height: 20px;
display: inline-block;
*display: inline;
*zoom: 1;
text-decoration: none;
background-color: orange;
text-align: center;
color: #fff;
font-size: 12px;
cursor: pointer;
}

/*show控制图片显示，hide控制图片隐藏*/
.show {
display: block;
}

.hide {
display: none;
}
/*数字导航鼠标滑过效果*/
.points a:hover, .points .active {
background-color: #FF4500;
}

/*左右两按钮正常展示效果*/
.prev, .next {
width: 24px;
height: 36px;
text-align: center;
display: inline-block;
*display: inline;
*zoom: 1;
color: #fff;
background-color: rgba(0, 0, 0, .3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d000000', endColorstr='#4d000000', GradientType=0);
line-height: 36px;
font-size: 14px;
cursor: pointer;
}

/*左右两按钮滑过效果*/
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, .5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000', GradientType=0);
}

/*左右两个按钮设置垂直居中*/

.prev {
position: absolute;
top: 50%;
left: 0;
margin-top: -18px;
}
.next {
position: absolute;
top: 50%;
right: 0;
margin-top: -18px;
}

js逻辑实现，核心逻辑就是循环播放图片，核心函数就是setInterval(nextSlider,1000),涉及到鼠标移入移出的停止和播放，点击按钮的上一张下一张，数字导航点击到具体某一张幻灯片以及数字导航的样式改变处理，以及闭包产生的事件绑定处理问题。

window.onload = function(){

// getElementsByClassName()ie9才支持
//轮播的一个索引值
var index = 0;
//定时器
var timer = null;
//最外层容器
var box = document.getElementById("box");
//图片容器
var imgbox = document.getElementById("imgbox");
//图片的超链接
var as = imgbox.getElementsByTagName("a");
//数字导航的父容器
var points = document.getElementById("points");
//数字导航数组
var pointsA = points.getElementsByTagName("a");
//上一张，下一张
var prev = document.getElementById("prev");
var next = document.getElementById("next");

//循环播放核心
timer = setInterval(nextSlider, 1000);
//下一张
function nextSlider(){

index++;

if(index>as.length-1){
index = 0;
}
changeStyle(index);

}
//上一张
function preSlider(){

index--;
if(index<0)
index= as.length-1;
changeStyle(index);
}

//具体控制图片的显示隐藏和按钮样式改变
function changeStyle(index){

for(var i=0;i<as.length;i++){
if(index == i){
as[i].className = "show";
pointsA[i].className = "active";
}else{
as[i].className = "hide";
pointsA[i].className = "";
}
}

}

//对数字导航按钮进行事件绑定，注意闭包

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

(function(j){
pointsA[j].onclick =function(){

changeStyle(j);
}
})(j);
}

//对上一张按钮进行事件绑定
prev.onclick = function(){
preSlider();
}
//对下一张按钮进行事件绑定
next.onclick = function(){
nextSlider();
}
//当鼠标放上去时清除定时器
box.onmouseover = function(){

clearInterval(timer);
}
//当鼠标离开时重新启动定时器
box.onmouseout = function(){
timer = setInterval(nextSlider, 1000);
}
}

3. 总结

经过测试，这个例子可以兼容ie6,7等。通过此案例你可以学到以下内容:

css:绝度定位和相对定位，inline-block以及产生的问题。

html:搭建页面的基本结构。

js:定时器的使用，事件的处理，闭包产生的问题，DOM的操作。

最后说一句，博客难免有疏漏之处，望各位大神多多指教。

代码地址:

轮播图demo下载地址