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