jquery简单多图片前后滚动插件

(function($) {
    $.fn.slidePicture = function(options) {
        var ops = $.extend({}, $.fn.slidePicture.defaults, options);

        return this.each(function() {
            $this = $(this);
            var opts = $.meta ? $.extend({}, ops, $(this).data()) : ops;

            var num = opts.num;
            var ul = $this.find("ul");
            var lifirst = ul.find("li:first");
            var liwidth = lifirst.width();
            var liheight = lifirst.height();
            // img个数
            var size = ul.find("li img").size();
            // 从第num个往后，都不显示
            ul.find("li:gt(" + (num - 1) + ") img,li:gt(" + (num - 1) + ")")
                    .css({
                        'display' : 'none'
                    });
            // 创建向前按钮
            var left_prevous = $("<div id=\"left_prevous\" class=\"pnLi\"><</div>");
            // 创建向后按钮
            var right_next = $("<div id=\"right_next\" class=\"pnLi\">></div>");
            // 添加到div上
            $this.before(left_prevous);
            $this.after(right_next);
            // div父容器的宽度，高度，偏移量
            var dwidth, dheight = $this.height(), dposition = $this.offset();
            left_prevous.css({
                'top' : dposition.top + ((dheight - left_prevous.height()) / 2)
                        + "px",
                'left' : dposition.left + "px"
            });
            right_next.css({
                'top' : dposition.top + ((dheight - right_next.height()) / 2)
                        + "px",
                'display' : 'none'
            });
            /**
             * chrome浏览器下，父div的内容没有加载完，取得的宽度没有被撑开
             * (http://jaykong.blog.163.com/blog/static/8895412010428111617633/)
             * 设置一下延迟加载右侧按钮的左偏移,100毫秒足够
             */
            setTimeout(function() {
                dwidth = $this.width();
                right_next.css({
                    'left' : dposition.left
                            + parseInt(dwidth - right_next.width()) + "px",
                    'display' : 'block'
                });
            }, 100);

            // 隐藏及显示
            function fade(fadeOut, fadeIn) {
                fadeOut.css({
                    'display' : 'none'
                });
                fadeIn.css({
                    'display' : 'block'
                });
            }
            // 左侧的index从0开始
            var first = 0;
            // 右侧的index从num开始
            var last = num;
            // 是否前向滚动结束,false表示结束
            var firstEnd = false;
            // 是否后向滚动结束，false表示结束
            var lastEnd = false;
            // 前一个操作是否前滚动,false表示否
            var doPrevous = false;
            // 前一个操作是否后滚动，false表示否
            var doNext = false;
            // 前滚动事件
            left_prevous.bind("click", function() {
                // 前滚动没有结束
                if (firstEnd == false) {
                    // 前一个操作是后滚动
                    if (doNext == true) {
                        last = last;
                        first = first;
                    }
                    // 前一个操作时前滚动，因此前后索引都各自加1
                    if (doPrevous == true) {
                        last = last - 1;
                        first = first - 1;
                    }
                    fade(
                            ul.find("li:eq(" + last + ") img,li:eq(" + last
                                    + ")"), ul.find("li:eq(" + first
                                    + ") img,li:eq(" + first + ")"));
                    // 0表示前滚动结束
                    if (first == 0) {
                        firstEnd = true;
                        doNext = false;
                    } else {
                        doNext = false;
                    }
                    lastEnd = false;
                    doPrevous = true;
                }
            });
            // 后滚动事件
            right_next.bind("click", function() {
                if (lastEnd == false) {
                    if (doPrevous == true) {
                        last = last;
                        first = first;
                    }
                    if (doNext == true) {
                        last = last + 1;
                        first = first + 1;
                    }
                    fade(ul.find("li:eq(" + first + ") img,li:eq(" + first
                            + ")"), ul.find("li:eq(" + last + ") img,li:eq("
                            + last + ")"));
                    if (last == size - 1) {
                        lastEnd = true;
                        doPrevous = false;
                    } else {
                        doPrevous = false;
                    }
                    firstEnd = false;
                    doNext = true;
                }
            });
        });
    }

    $.fn.slidePicture.defaults = {
        num : 3
    };

})(jQuery);

需要的css样式，css样式可以自调:

body {
    background-color: #ddd;
    margin: 0;
}

.pic {
    position: absolute;
    left: 400px;
    top: 300px;
    background: #666666;
    border: 5px solid #666666;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    list-style: none;
}

.pic ul {
    padding-left: 60px;
    padding-right: 60px;
    margin: 0px;
    list-style-type: none;
}

.pic ul li {
    float: left;
    margin-top: 10px;
    margin-bottom: 1px;
    margin-left: 0px;
    margin-right: 2px;
    height: 135px;
    z-index: 10;
}

.pnLi {
     30px;
    height: 135px;
    vertical-align: middle;
    text-align: center;
    line-height: 135px;
    font-size: 4.5em;
    font-weight: 900;
    position: absolute;
    z-index: 20;
}

.pnLi:hover {
    color: #fff;
    text-shadow: 0px 0px 3px #333;
    cursor: pointer;
}

.singleImg {
    position: relative;
    z-index: 10;
    vertical-align: bottom;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 4px solid #333;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
    -mozbox-shadow: 0 1px 5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
    opacity: 0.7;
}

.singleImg:hover {
    opacity: 1;
    box-shadow: 0 1px 5px rgb(255, 255, 255);
    -mozbox-shadow: 0 1px 5px rgb(255, 255, 255);
    -webkit-box-shadow: 0 1px 5px rgb(255, 255, 255);
}

页面调用方法:

<script type="text/javascript">
        $(document).ready(function(){
        var totalNum=$("pic ul li img").size();
        var first=0;
        $("img").load(function(){
            first++;
        });
        if(first==totalNum){
            $(".pic").slidePicture();
        }
        });
    </script>

这样调用有一个原因，当图片一个一个加载时，原有的父div会随着图片的一个一个加载而慢慢变大，我们的效果是希望父的div的大小不发生变化,所以需要利用load图片加载来制作一个计数器，当数值与图片的个数相等的时候，渲染整个插件。

<body>
        <div class="pic">

            <ul>
                <li class="imgLi">
                    <a href="#"><img
                            src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb01.jpg" alt=""
                            class="singleImg"> </a>
                </li>
                <li class="imgLi">
                    <a href="#"><img
                            src="http://down.139zhuti.com/bizhi/2010/8/24/b8def93.jpg" alt=""
                            class="singleImg"> </a>
                </li>
                <li class="imgLi">
                    <a href="#"><img
                            src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb02.jpg" alt=""
                            class="singleImg"> </a>
                </li>
                <li class="imgLi">
                    <a href="#"><img
                            src="http://down.139zhuti.com/bizhi/2010/8/24/e16ac0.jpg" alt=""
                            class="singleImg"> </a>
                </li>
                <li class="imgLi">
                    <a href="#"><img
                            src="http://down.139zhuti.com/bizhi/2010/8/24/261f104.jpg" alt=""
                            class="singleImg"> </a>
                </li>
                <li class="imgLi">
                    <a href="#"><img
                            src="http://down.139zhuti.com/bizhi/2010/8/24/261f102.jpg" alt=""
                            class="singleImg"> </a>
                </li>
                <li class="imgLi">
                    <a href="#"><img
                            src="http://down.139zhuti.com/bizhi/2010/8/24/32e0012.jpg" alt=""
                            class="singleImg"> </a>
                </li>
                <li class="imgLi">
                    <a href="#"><img
                            src="http://down.139zhuti.com/bizhi/2010/8/24/32e0011.jpg" alt=""
                            class="singleImg"> </a>
                </li>
            </ul>
        </div>
    </body>

效果图如下：