Jquery实现图片轮换效果

最近在看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代码都比较简单，就不做多的解释了。就这样，比较简单的图片轮换效果就实现。效果如图：