学习轮播后的一点小心得

关于学习轮播后的一点小心得

这里直接贴出HTML代码，相关解释会放在代码前后。

原理说明（个人理解）：将所有图片放在一个div中的同时，使其左浮动呈现在一行；同时用一个容器包裹住，将容器的大小设置为一张图片的大小，超出的部分隐藏起来；通过控制图片的div的left值，向左或向右的移动一张图片的大小；可以设置相关按钮去控制图片的切换，最后通过一个定时器让图片自动播放。

<div id="container">
<div id="list" style="left:-600px;">
<img src="../../images/103.jpg"/>
<img src="../../images/101.jpg"/>
<img src="../../images/102.jpg"/>
<img src="../../images/103.jpg"/>
<img src="../../images/101.jpg"/>
</div>
<div id="button">
<span index="1" class="on"></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>

简单说明：这里的轮播图，其实就是一个container容器,包含了一个图片列表div（这里为了防止切换出现空白处，在最开始和最后分别加上了最后一张和第一张的图片，所以在list的样式中设置了left：-600px，用于显示要显示的第一张图片），一组与图片对应的按钮div，以及前进后退的俩按钮。但是重点是css样式上。下面也直接贴出代码：

#container{
position:relative;
margin:0 auto;
width:600px;
height:337px;
overflow:hidden;
}

container的大小应该和一张图片的大小相同，同时设置超出的部分隐藏，这很重要，因为container是整个轮播的可视区域。

#list{
position:absolute;
width:3000px;
height:337px;
}
#list img{
width:600px;
height:337px;
float:left;
display:block;
}

list的宽需要设置为所有图片的宽的总和，设置为绝对定位，同时list下的img需要左浮动的同时显示为block。

#button{
position:absolute;
width:75px;
height:20px;
z-index:2;
bottom:20px;
left:45%;
}
#button span{
width:20px;
height:20px;
float:left;
margin-left:3px;
border-radius:10px;
border:1px #FFF solid;
cursor: pointer;
}

.on{
background-color:#FF66CC;}

关于与图片相对应的按钮的css样式设置，说是按钮，其实是用span标签，这里要注意的是按钮的定位，以及鼠标移动到上面显示的是pointer，且需要在图片的上层显示，即z-index设置的要比图片高；给按钮添加一个类on，控制背景颜色，用以显示当前是哪个按钮。

.arrow{
position: absolute;
width: 60px;
height: 40px;
font-size: 50px;
color: #999999;
margin-top: 25%;
}
#next{
right:-20px;
}

前进后退按钮的样式设置，arrow为两个按钮的公共样式，需要注意的同样是俩按钮的位置定位，可以根据自己的需要进行调整。

上面就是基本的css样式，下面分步说明如何用js来控制图片切换。

啥也别说，先获取元素：

var container = document.getElementById("container");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var list = document.getElementById("list");
var buttons = document.getElementById("button").getElementsByTagName("span");

接下来是最核心的部分，写一个function animate()，来控制图片的切换。从上面看，所有的图片都放在了一个id为list的div里面，且设置了左浮动，这时候当你想要切换图片的时候，直接修改list的left值，将整个div左移或右移一张图片的宽度，在可视区域container就会看到从一张图片切换到了下一张或上一张图片。

function animate(offset){
var newleft = parseInt(list.style.left)+ offset;
list.style.left = newleft + "px";
}
prev.onclick = function(){animate(600);}
next.onclick = function(){animate(-600);}

这里的offset是图片的大小，通过控制offset的正负，进而控制图片是左移还是右移。但是当右移到最后一张图片或左移到第一张图片时，再进行移动，便会出现空白。

下面对其进行改进，添加判断，判断是否是第一张或最后一张图片：

if(newleft<-1800){
list.style.left = '-600px';
}
if(newleft>-600){
list.style.left =-1800  + "px";
}

最后再加上一个定时器timer

function start(){
timer = setInterval(function(){
next.onclick();
},2600);
start();

到这基本可以实现一个最简单的图片轮播（没有按钮等功能），下面接着完善。

下面代码是让图片实现平移效果，即一点点的移动，而不是整张图片一下就移动过去，关键就在于设置一个速度，让图片按照这个速度去移动，同时需要去判断图片是否移动到相应的位置：

function animate(offset){
var newleft = parseInt(list.style.left)+ offset;
//list.style.left = newleft + "px";
var speed;
var time = 60 ;
speed = offset / time;//每次移动的大小，即速度
go();
function go(){
//判断是左移还是右移的同时判断图片是否到达相应位置
if(( speed < 0 && parseInt(list.style.left) > newleft) || (speed > 0 && parseInt(list.style.left)) < newleft ){
list.style.left = parseInt(list.style.left) + speed + "px";
setTimeout(go,10);//10毫秒一次调用自身
}
else{
list.style.left = newleft + 'px';
if(newleft<-1800){
list.style.left = '-600px';
}
if(newleft>-600){
list.style.left =-1800  + "px";
}
}
}

}

接下来，当图片切换时，图片按钮也要相应的切换，同样按钮的位置也需要进行判断：

var index = 1 ;  //控制按钮的位置
function showBtn(){
//循环遍历按钮组，去除按钮的on类名，同时给当前按钮添加on类名（当前index=1 减一即为第一个按钮）
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=="on"){
buttons[i].className="";
break;
}
}
//alert(buttons[index-1])
buttons[index-1].className="on";
}

//将按钮显示函数应用到前进或后退按钮上，重点是需要注意index的变化
prev.onclick = function(){
index--;
if(index<1){
index =3;
}
showBtn();
animate(600);
}
next.onclick = function(){
index++;
if(index>3){
index =1;
}
showBtn();
animate(-600);
}

接着实现点击按钮，切换图片的功能（也放在showBtn()函数中）：

//遍历按钮组，添加点击功能
for(var i=0;i<buttons.length;i++){
buttons[i].onclick = function(){
//获取当前被点击按钮的index值
var nowIndex = parseInt(this.getAttribute("index"));
//alert(nowIndex);
//判断被点击按钮是否就是当前的按钮
if(nowIndex == index){
return;
}
//通过当前index值和被点击index值的差，计算出需要的位移量，并进行位移
var nowOffset = -600 * (nowIndex - index);
//alert(nowOffset);
//更新index值，为当前被点击的index值，同时还要调用showBtn函数，同样实现按钮切换
index = nowIndex;
animate(nowOffset);
showBtn();
}
}

最后的最后，添加鼠标移入移出事件，鼠标移入，清除定时器；鼠标移除，调用定时器：

container.onmouseover = function(){
clearInterval(timer);
}
container.onmouseout = function(){
start();
}

因为某些原因，没办法上传相关图片，希望见谅；

文章纯属个人理解，是在观看慕*网相关视频后所写，如果有错误希望大家指出来；

以上。