动手写一个HTML5的无限循环滚动焦点图

更多博客：http://blog.ilibing.com/

现在每个门户网站基本上一打开都是一个大大的焦点图，各种炫酷的滚动的效果。网上也有各式各样的插件，简单好用。但是如果我们能够写一个好用的焦点图滚动插件那岂不是更有成就感？其实也是很简单的，废话不多说动手吧。

给个Demo地址：http://www.ilibing.com/demo/slider.html

首先讲一下无限滚动焦点图的原理：

先用文字表达一下大概

假设有三张滚动焦点图，则位置为 3  1  2，第二个为可视滑块。

点击下一张按钮：则位置为：123，再点击下一张按钮则位置为231。点击下一张按钮的时候，第一张图片要放到最右，其他的图片则是往左挪动一个位置。

点击上一张按钮：则位置为：231，再点击下一张按钮则位置为123。点击上一张按钮的时候，最后一张图片要放到最左，其他的图片则是往右挪动一个位置。

先加载Jquery和清除网页的默认样式：

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<style>
    * {
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        font-size: 100%;
        vertical-align: baseline;
    }
    
    html {
        max-width: 100%;
        height: auto;
        font-family: "Microsoft Yahei"
    }
    
    body {
        line-height: 1;
        background: #f5f5f5;
        -webkit-text-size-adjust: auto;
        font-size: 14px;
        color: #333;
    }
    
    ol, ul {
        list-style: none;
    }
</style>

然后就可以正式开写了：

写一个焦点图块，ul包含了3个焦点图li：

<ul class="slider">
    <li style="background: #006cff">1</li>
    <li style="background: #798777">2</li>
    <li style="background: #127841">3</li>
</ul>

设置焦点图的样式：

.slider {
    width: 400px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin: 10px auto;
}

.slider li {
    position: absolute;
    height: 200px;
    width: 400px;
    text-align: center;
    line-height: 200px;
}

然后为其添加两个按钮控制上一张和下一张图片的切换：

<div class="button">
    <input id="pre" type="button" value="上一张"/>
    <input id="next" type="button" value="下一张"/>
</div>

接下来的js才是大招：