jQuery轮播图学习

学习前端有了一段时间了，慢慢的有了一些自己的体会，于是想写个博客记录一下自己的学习，巩固自己知识的同时，还能拿来复习用。

进入正题，今天学习jQuery的时候，正好看到了轮播图这一块，在这里记录一下。
废话不多说，先上代码。
html部分：
<div class="slideShow">
    <ul>
        <li><a href=""><img src="1F.jpg"></a></li>
        <li><a href=""><img src="2F.jpg"></a></li>
        <li><a href=""><img src="3F.jpg"></a></li>
        <li><a href=""><img src="4F.png"></a></li>
        <li><a href=""><img src="5F.jpg"></a></li>
    </ul>

    <div class="showNav">
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</div>

这一部分很简单，就是找五个图片放到一个div里面，在里面设置一个div放置图下面的小按钮。
css部分：

*{
margin: 0;
padding:0;
}
body{
font-size: 14px;
}
ul{
list-style: none;
}
.slideShow{
width: 346px;
height: 210px;
border:1px solid #eeeeee;
position: relative;
overflow: hidden;
z-index: 1;
}
.slideShow ul{
width: 2000px;
position:relative;
}
.slideShow ul li{
float: left;
width:346px;
}
.slideShow .showNav{
position: absolute;
right: 10px;
bottom:5px;
text-align: center;
font-size: 12px;
line-height: 20px;
}
.slideShow .showNav span{
cursor: pointer;
display: block;
float: left;
width: 20px;
height: 20px;
background: #ff5a28;
margin-left:2px;
color:#fff;
}
.slideShow .showNav .active{
background: #b63e1a;
}

设置样式的时候要注意把最外层的div设置它的 overflow: hidden;这样超出的部分才会被隐藏。

js部分：

<script type="text/javascript">
    $(document).ready(function(){
        //获取最外层框架的名称
        var slideShow = $(".slideShow"),
        ul = slideShow.find("ul"),
        //获取按钮
        showNumber = slideShow.find(".showNav span"),
        //获取每一张图片的宽度
        oneWidth =slideShow.find("ul li").eq(0).width();
        //定时器返回值，主要用于关闭定时器
        var timer = null;
        //iNow为正在展示的图片的索引值，当用户首次打开时，索引值为0
        var iNow = 0;
        showNumber.on("click",function(){
            $(this).addClass("active").siblings().removeClass("active");
            //获取被点击按钮的索引值
            var index = $(this).index();
            iNow = index;
            ul.animate({"left":-(oneWidth*iNow)});
            //console.log(oneWidth);
        });

        timer = setInterval(function(){
            iNow++;
            if(iNow>showNumber.length-1){
                iNow = 0;
            }
            showNumber.eq(iNow).trigger("click");
        },5000);
    });
</script>

相信大家都能看的懂吧，毕竟我是个小菜鸟。= =
最后的效果：

其实这个功能很简单，后续还会加上上一页，下一页功能。
想了解更多详情：http://www.jb51.net/article/76153.htm