jQuery实现图片轮播效果

　　　图片轮播是一个老生常谈的东西，今天跟着书上写了一个demo。（参考《锋利的jQuery》）
　　　要实现的功能，图片可以向左向右滚动，自动循环播放，并且可以跳转至指定页面。

　　　查看示例

　　　图片滚动效果主要用到的东西就是position:absolute 和 left: 0; overflow：hidden属性，用于定位图片和隐藏显示多余图片。
　　　具体代码可以点开示例链接——查看网页源代码。。
　　　看一下代码结构吧
　　　scroll.html:
　　　

<div class="v_show">
    <div class="v_caption">
        //4个页面标识，可点击切换至具体页面
        <div class="highlight_tip">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        //向左 向右按钮
        <div class="change_btn">
            <span class="prev">back</span>
            <span class="next">next</span>
        </div>
    </div>
    //图片容器
    <div class="v_content">
        //图片显示区域
        <div class="v_content_list">
            <ul>
                //将图片资源全部写在这里
                <li><a href="#"><img src="img/01.jpg" alt="海贼王"/></a><h4><a href="#">海贼王</a></h4>
                    <span>播放:<em>28,276</em></span></li>
                <li><a href="#"><img src="img/01.jpg" alt="海贼王"/></a><h4><a href="#">海贼王</a></h4>
                    <span>播放:<em>28,276</em></span></li>

                .......
            </ul>
        </div>
    </div>
</div>

　　　main.js:
　　　

$(function () {
        var page = 1;
        var i = 4;
        //向右滚动效果实现
        $("span.next").click(function () {
            //console.log('enter');
            var $parent = $(this).parents("div.v_show");
            var $v_show = $parent.find("div.v_content_list");
            var $v_content = $parent.find("div.v_content");

            //获取内容显示区宽度
            var v_width = $v_content.width();

            var len = $v_show.find("li").length;
            var page_count = Math.ceil(len / i);
            if (!$v_show.is(":animated")) {
                //如果已经是最后一页，则滚动到第一页
                if (page == page_count) {
                    $v_show.animate({left: "0"}, "normal");
                    page = 1;
                } else {
                    $v_show.animate({left: "-=" + v_width}, "normal");
                    page++;
                }

                $parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");
            }

        });

        //向左滚动效果实现
        $("span.prev").click(function () {
            var $parent = $(this).parents("div.v_show");
            var $v_show = $parent.find("div.v_content_list");
            var $v_content = $parent.find("div.v_content");

            var v_width = $v_content.width();

            var len = $v_show.find("li").length;
            var page_count = Math.ceil(len / i);
            //防止多次连续点击鼠标移除后仍在进行动画
            //判断当前元素是否处于动画状态，并选择是否执行动画操作
            if (!$v_show.is(":animated")) {
                //如果已经是第一页，则滚动到最后一页
                if (page == 1) {
                    $v_show.animate({left: '-=' + v_width * (page_count - 1)}, "slow");
                    page = page_count;
                } else {
                    $v_show.animate({left: "+=" + v_width}, "normal");
                    page--;
                }
                //上方4个标识的样式增加与移除
                $parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");

            }

        });

        $(".highlight_tip span").click(function () {
            var $pageToGo = $(this).index() +1;

            var $parent = $(this).parents("div.v_show");
            var $v_show = $parent.find("div.v_content_list");
            var $v_content = $parent.find("div.v_content");


            var v_width = $v_content.width();

            var len = $v_show.find("li").length;


            if (!$v_show.is(":animated")) {
                //判断向右滚动还是向左滚动
                if ($pageToGo > page) {

                    $v_show.animate({left: "-=" + v_width*($pageToGo - page)}, "normal");
                    page = $pageToGo;
                    $parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");

                } else {
                    $v_show.animate({left: "+=" + v_width*(page - $pageToGo)}, "normal");
                    page = $pageToGo;
                    $parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");

                }
            }


            });
            //设置自动滚动 时间设为3秒
setInterval("$('span.next').trigger('click')",3000);
    }
)

主要css样式：

.highlight_tip span {
    display: inline;
    float: left;
    width: 7px;
    height: 7px;
    overflow: hidden;
    margin: 0 2px;
    background: url(img/btn_cartoon.gif) no-repeat 0 -320px;
    text-indent: -9999px;
    cursor: pointer;
}

.v_content {
    position: relative;
    width: 592px;
    height: 160px;
    overflow: hidden;
    border-right: 1px solid #E7E7E7;
    border-bottom: 1px solid #E7E7E7;
    border-left: 1px solid #E7E7E7;
}

.v_content_list {
    position: absolute;
    width: 2500px;
    top: 0px;
    left: 0px;
}

.highlight_tip .current {
    background-position: 0 -220px;
}

详细实现代码可以查看上方给出的示例链接，在此不赘述。