在做网站页面设计时,许多页面都会用到轮播图,做一些展示什么的.现在也有很多框架,能够非常简单或者直接套用模板做出来。其实轮播图的原理也很简单，刚好这两天在做页面时用到了，记录一下！

首先得要清楚，轮播图是左右滑动的，那么应该把图片依次放在一个水平位置上，然后只显示一张图片大小,切换的时候左右移动就ok。在这里我使用4张图片，每张图片尺寸为：500px250px。然后放一个<div>，id 设置为 banner， 大小设置为一张图片的大小，超出的部分设置为隐藏，即 500px250px ，用来显示每一张图片。

如何放置图片？

这里我们可以使用无序列表，将无序列表写在上面id="banner"的<div>里面，每张图片放在一个<li>标签里,然后将所有的<li>标签设置向左浮动，并且要将 <li> 的父标签 <ul> 宽度设置为4张图片的总宽度，这样四张图就依次排列在一个水平位置了。
并且这里我们还需要将<ul>设置为绝对定位。
代码如下：

<div class="banner">
      <ul id="inner">
          <li class="Pic"><a> <img alt="1" src="imgs/f1.jpg" width="500px" height="250px" > </a> </li>
          <li class="Pic"><a> <img alt="2" src="imgs/f2.jpg" width="500px" height="250px"> </a> </li>
          <li class="Pic"><a> <img alt="3" src="imgs/f3.jpg" width="500px" height="250px"> </a> </li>
          <li class="Pic"><a> <img alt="4" src="imgs/f4.jpg" width="500px" height="250px"> </a> </li>
      </ul>
  </div>

###下面是CSS样式：
.banner{
    margin: 20px 20px;
    padding: 0 0;
    width: 500px;
    height: 250px;
    border: 1px #DDD solid;
    position: relative;
    overflow: hidden;
    }
#inner{
    position: absolute;
    width:400%;
}
.Pic{
    float: left;
    list-style: none;
}

如何实现轮播效果？

一个轮播图，应该要有切换上一张和下一张图片的按钮，点击按钮使得图片平滑地移动到上一张或下一张。自动轮播可以视为每个时间间隔自动执行切换下一张图片的功能，所以我们添加两个按钮，再使用js实现切换上一张图和下一张图的功能。这里我使用两个div来代替按钮，并且放置在图片两侧：
代码如下：

<div class="changeImg" id="left" onclick="lastImg();" style="left:0;" ></div>
      <div class="changeImg" id="right" onclick="nextImg();" style="right:0;"></div>

###下面是CSS样式：
.changeImg{
    position: absolute;
    width: 100px;
    height:250px;
}
.changeImg:HOVER{
    cursor: pointer;
}

到这里我们的HTML和CSS布局部分已经完成了，接下来就是使用js来实现两个按钮切换图片的功能！

如何切换图片？

前面我们已经设置过，banner的大小刚好是一张图片的大小，超出的部分隐藏，所以一开始banner显示了第一张图片，其余的隐藏了我们看不见。要显示下一张图片，我们只需将四张图片整体向左移动一张图片宽度的像素，即左移500px,由于<ul>是绝对定位的，我们可以通过设置<ul>标签的left:-500px来实现。

由于每张图片宽度都是相同的500px，所以我们可以很轻松地根据图片的次序来计算出需要移动的像素大小，首先我们需要知道当前显示的是第几张图片，设置一个变量var index = 0;,移动到下一张图片时 index++; ,图片的偏移量应该为 -index * 500 ;这里由于设置的是left属性，图片左移，所以需要加负号。切换上一张图片的操作同理，这里不再细述。
最后呢，为了在切换图片时能有一个平滑滚动的效果，我们需要使用jQuery的animate方法来实现。

代码如下：

function lastImg()
{
    index--;
    if(index < 0)index = 3;
    var num = -index * 500 + "px";
    $('#inner').animate({'left':num},1500);
}

function nextImg()
{
    index++;
    if(index > 3)index = 0;
    var num = -index * 500 + "px";
    $('#inner').animate({left:num},1500);
}

自动轮播

前面已经说了，自动轮播其实就是定时调用切换下一张图片的方法就行了，切换下一张图片的方法我们上面已经写好了。实现自动轮播可以在页面加载完后调用setInterval定时执行nextImg()方法就行了。

如何解决图片不能循环滚动?

上面我们写的方法存在一个问题，比如当前是第一张图片，我们点击上一张图，然后在切换到最后一张图片时，没有我们预想的向左移循环到最后一张。而是向右依次移动到最后一张图片。
解决这个问题，我们可以复制最后一张图片放在最前面，将原来的第一张图片复制一张放到最后面。然后在就可以平滑从第一张左移到最后一张，或者平滑从最后一张右滚到第一张；滚动完成之后，立即跳回到第一张或最后一张，此时不使用动画，直接跳转，暗度陈仓。视觉上并不会察觉到我们偷偷进行了图片移动，这样就实现了循环滚动。