标签：
最近在看jquery书时，看到一个比较有趣的东西：图片轮换。这里和大家分享下我看完后写的一个demo。实现图片轮换要完成三部分模块：html部分、css部分、jqury部分。下面分步详细说明。
1.html部分：
<div class="showContainer">
<div class="showHead">
<div id="headName" class="headItem">五月天专辑</div>
<div id="pageInfo" class="headItem">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
</ul>
</div>
<div id="controlBtns" class="headItem">
<span><<</span><span>>></span>
</div>
</div>
<div class="showContent">
<div class="showContentList">
<ul>
<!--第一板-->
<li>
<img src="../imgs/fastSong.jpg" alt="Alternate Text" />
<div>伤心的人别听慢歌....</div>
<span>播放：523,4455</span>
</li>
<li>
<img src="../imgs/goldchildren.jpg" alt="Alternate Text" />
<div >神的孩子都在跳舞....</div>
<span>播放：123,4455</span>
</li>
<li>
<img src="../imgs/poetryAfter.png" alt="Alternate Text" />
<div>后青春期的诗....</div>
<span>播放：133,4445</span>
</li>
<li>
<img src="../imgs/secondLive.jpg" alt="Alternate Text" />
<div>第二人生....</div>
<span>播放：183,4655</span>
</li>
<!--第二板-->
<li>
<img src="../imgs/liveForLove.jpg" alt="Alternate Text" />
<div>我为爱而生....</div>
<span>播放：423,4355</span>
</li>
<li>
<img src="../imgs/enough.jpg" alt="Alternate Text" />
<div>知足。怎么去拥有 一道彩虹....</div>
<span>播放：723,4955</span>
</li>
</ul>
</div>
</div>
</div>
基本上就是三个部分：按钮控区#controlBtns，.图片展示区.showContent，当前板块#pageInfo。
2.css部分。主要是控制好图片展示区的样式。图片列表父容器.showContent的
position设为relative,overflow为hidden。其子元素showContentList的position设为absolute，列表ul的white-space设为nowrap。为了方便大家快速查看效果，我把完整的css也附上来：
body {
font-size:14px;
}
ul {
margin:0;
padding:0;
}
ul li {
float:left;
list-style:none;
}
.main {
height:500px;
width:1100px;
border:1px solid #808080;
border-radius:2px;
margin:10px auto;
}
.showContainer {
height:200px;
width:770px;
margin:10px auto;
}
.showContainer .showHead {
height:35px;
width:100%;
background-color:#2B6CAD;
opacity:0.7;
border-top-left-radius:2px;
border-top-right-radius:2px;
}
.showContainer .headItem {
float:left;
margin-top:10px;
padding-left:5px;
}
#headName {
width:130px;
font-size:16px;
color:white;
font-weight:bold;
}
#pageInfo {
width:80px;
}
#pageInfo ul li {
width:12px;
height:12px;
border-radius:10px;
background-color:#E7E7E7;
text-align:center;
margin-right:2px;
}
#pageInfo ul li.selected {
background-color:#41403C;
}
#controlBtns {
width:65px;
height:20px;
border:1px solid #41403C;
border-radius:4px;
background-color:white;
line-height:20px;
}
#controlBtns span {
cursor:pointer;
display:block;
float:left;
height:20px;
width:30px;
text-align:center;
}
#controlBtns span:first-child {
border-right:1px solid #41403C;
}
#controlBtns span:hover {
color:red;
font-weight:bold;
}
.showContainer .showContent {
height:180px;
width:100%;
overflow:hidden;
position:relative;
}
.showContent .showContentList {
position:absolute;
height:100%;
}
.showContainer .showContentList ul {
height:180px;
white-space:nowrap;
}
.showContainer ul li{
height:180px;
width:187px;
margin-right:2px;
/*margin-left:2px;*/
margin-top:5px;
}
.showContainer ul li img {
height:120px;
width:180px;
cursor:pointer;
border:1px solid #808080;
}
.showContainer ul li div {
font-weight:bold;
margin:5px 0;
}
3. js部分。利用jquery的animate方法实现起来确实简单代码如下：
$(function () {
var currentIndex = 1;
var cellNum = 4;
var contentWidth = $(‘.showContent‘).width();
var $list = $(‘.showContentList‘); //列表对象 即滚动的容器
var banCount = Math.ceil($list.find(‘li‘).length / cellNum); //计算总的板数
$(‘#controlBtns span‘).click(function () {
var index = $(this).index();
if ($list.is(":animated")) { //防止出现连续多次点击后，仍然滑动的情况
return;
}
if (index == 0) { //上一板
if (currentIndex == 1) {
currentIndex = banCount;
$list.animate({ left:‘-‘ contentWidth*(banCount-1) }, ‘normal‘);
}
else {
currentIndex --;
$list.animate({ left: ‘ =‘ contentWidth }, ‘normal‘);
}
}
else {
if(currentIndex == banCount)
{
currentIndex=1;
$list.animate({ left: ‘0‘ }, ‘normal‘);
}
else
{
currentIndex ;
$list.animate({ left: ‘-=‘ contentWidth }, ‘normal‘);
}
}
/*显示当前所在版的*/
$(‘#pageInfo ul li‘).eq(currentIndex - 1).addClass(‘selected‘)
.siblings().removeClass(‘selected‘);
});
});
js代码都比较简单，就不做多的解释了。就这样，比较简单的图片轮换效果就实现。效果如图：
标签：
原文地址：http://www.cnblogs.com/airbreak/p/4595450.html
