jQuery滚动展示代码

本文由清尘发表于2012-01-04 18:50最后修改于2014-04-25属于jQuery分类

JS部分:

$(function(){
    var page=1;
    var i=6; //每版放6张图片
    //下一页绑定
    $("span.next").click(function(){
        var parentBox=$(this).parents("div.v_show"); //根据当前单击元素获取到父
        var scrollBox=parentBox.find("div.v_content_list"); //寻找到视频内容展示区域
        var scrollBox_out=parentBox.find("div.v_content"); //找到视频内容展示区外围div
        var v_width=scrollBox_out.width();
        var len=scrollBox.find("li").length;
        var page_count=Math.ceil(len/i); //只要不是整数,就往大的方向取整
        if(!scrollBox.is(":animated")){
            //判断视频内容展示区是否正在动画
            //已经到最后一个版面,再向后,跳转到第1个版面
            if(page==page_count){
                scrollBox.animate({left:'0px'},"slow");
                page=1;
            }else{
                //通过改变left值,达到每次换一个版面
                scrollBox.animate({left:'-='+v_width},"slow");
                page++;
            }
        }
        parentBox.find("span").eq(page-1).addClass("current").siblings().removeClass("current");
    })
    //上一页绑定
    $("span.prev").click(function(){
        var parentBox=$(this).parents("div.v_show"); //根据当前单击元素获取到父
        var scrollBox=parentBox.find("div.v_content_list"); //寻找到视频内容展示区域
        var scrollBox_out=parentBox.find("div.v_content"); //找到视频内容展示区外围div
        var v_width=scrollBox_out.width();
        var len=scrollBox.find("li").length;
        var page_count=Math.ceil(len/i); //只要不是整数,就往大的方向取整
        if(!scrollBox.is(":animated")){
            if(page==1){//已经到第一版面时,再向前,跳转到最后一个版面
                scrollBox.animate({left:'-='+v_width*(page_count-1)},"slow");
            }else{
                scrollBox.animate({left:'+='+v_width},"slow");
                page--;
            }
        }
        parentBox.find("span").eq(page-1).addClass("current").siblings().removeClass("current");
    })
})

效果类似下图(此处旨在演示JS写法,未做CSS美化。CSS部分请自行编写。):

183529c9g7vbpptg9vq99p

HTML部分:

<div class="v_show">
        <div class="v_caption">
            <h2 class="cartoon fl">卡通动漫</h2>
            <div class="highlight_tip fl">
                <span class="current">1</span>
                <span>2</span>
                <span>3</span>
            </div>
            <div class="change_btn fl">
                <span class="prev">上一页</span>
                <span class="next">下一页</span>
            </div>
            <em><a href="#" target="_blank">更多>></a></em>
        </div>
        <div class="v_content">
            <div class="v_content_list">
                <ul>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                    <li>
                    <a href="#" target="_blank"><img src="http://nds.tgbus.com/ztimages/game4.jpg" alt="" style="cursor:pointer"></a>
                    <h4><a href="#" target="_blank">文字标题</a></h4>
                    <span>播放<em>787,88</em></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>