Ross Wan's World!

Python, Ajax, PHP and Linux.

imgslideshow: 基于 jQuery 的图片幻灯片插件

Posted by Ross Wan 于 2008/12/11

现在,越来越多的网站首页,都以放置一个图片幻灯片来显示”头条”内容。于是,为了方便使用,制作了一个功能简单的图片幻灯片插件。

代码

(function($){
    $.fn.extend({
        'imgSlideShow': function(options){
            // 扩展参数
            var op = $.extend({
                'itemclass': null,
                'desclass': null,
                'delay': 2000
            }, options);
            // 设置窗口的样式
            this.css({
                position: 'relative',
                overflow: 'hidden'
            });
            // 设置图片项的样式
            this.children('.' + op.itemclass).css({
                clear: 'both',
                display: 'none'
            });
            // 添加数字标签项窗口
            $('<div id="imgslideshow_label0000"></div>').appendTo(this).css({
                position: 'absolute',
                bottom: '2px',
                right: '2px',
                width: '100%',
                height: '22px',
                'z-index': 10000,
                overflow: 'hidden'
            });
            // 取得所有图片项
            var items = $('.' + op.itemclass, this);
            // 图片项的数目
            var itemsLength = items.length;
            // 当前的图片项索引
            var curItemIndex = 0;
            // 当前的 timeout 函数返回值
            var timeoutReturn;

            // 添加数字标签项
            for(var i=itemsLength-1;i>=0;i--){
                $('<div class="label0000" id="label0000' + i + '">' + (i + 1) + '</div>').appendTo('#imgslideshow_label0000').css({
                    float: 'right',
                    width: '20px',
                    height: '20px',
                    'line-height': '20px',
                    'text-align': 'center',
                    'font-weight': 'bold',
                    'background-color': '#EFEBD6',
                    'opacity': 0.8,
                    'border': '1px solid #000',
                    'cursor': 'pointer',
                    'margin-left': '2px'
                    // 标签项的单击事件
                }).click(function(e){
                    // 停止当前的图片项动画并将其隐藏和设置回透明度为1
                    items.eq(curItemIndex).stop().hide().css({
                        opacity: 1
                    });
                    // 阻止事件流
                    e.stopPropagation();
                    // 暂停当前的 timeout 函数
                    clearTimeout(timeoutReturn);
                    // 设置标签项的样式
                    $('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
                    items.eq(curItemIndex).hide();
                    $('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
                    // 从当前的索引开始,重新开始图片动画
                    curItemIndex = parseInt($(this).text()) - 1;
                    imgSlideShowProcess();
                });
            }
            // 图片动画执行函数
            var imgSlideShowProcess = function(){
                $('#label0000' + curItemIndex).css('background-color', '#FF8210');
                items.eq(curItemIndex).fadeIn(300, function(){
                    timeoutReturn = setTimeout(imgFadeOut, op.delay);
                });
            };
            // 淡出图片
            var imgFadeOut = function(){
                items.eq(curItemIndex).fadeOut(1, function(){
                    $('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
                    curItemIndex = (curItemIndex + 1) % itemsLength;
                    imgSlideShowProcess();
                });
            };
            // 开始图片动画
            imgSlideShowProcess();

            return this;
        }
    });
})(jQuery);

使用示例

<html>
    <head>
        <script type="text/javascript" src="jquery-1.2.6.js"></script>
        <script type="text/javascript" src="jquery-imgslideshow.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#container').imgSlideShow({itemclass: 'item', 'delay': 3000})
            });
        </script>
    </head>
    <body>
        <div id="container">
            <div class="item">
                <img src="imgs/1.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/2.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/3.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/4.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/5.jpg"/>
            </div>
        </div>
    </body>
</html>

可选参数 delay 是设置每幅图片的显示时间。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+

Advertisements

一条回应 to “imgslideshow: 基于 jQuery 的图片幻灯片插件”

  1. jacksuc said

    没有设置文字! 设置上文字会更完美点!

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

 
%d 博主赞过: