js最简单幻灯片切换支持同一页面多次调用

约定不等于承诺〃 2022-08-05 07:42 113阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Images</title>
    <script type="text/javascript" src="js/jquery.1.6.3.js"></script>
    <style type="text/css">
    * { margin:0;padding:0;}
    html,body { font:normal 500 14px/20px arial;font-weight:500;font-style:normal;}
    a, a:link, a:visited { text-decoration:none;color:blue;}
    a:hover, a:active { text-decoration:none;color:#F60;}
    
    .imgbox { width:400px;height:280px;border:1px #DDD solid;margin:20px auto;}
    .imgbox .list { display:none;}
    </style>
    <script type="text/javascript">
    ;(function($){
        $.fn.extend({
            'imgbox' : function(options){
                var defaultSetting = {
                    'changeTime' : 5
                };
                options = $.extend(defaultSetting,options||{})
                return this.each(function(){
                    var $obj = $(this);
                    $obj.css('position','relative');
                    var $list = $('div.list',$obj).find('a');
                    var t = 3;
                    var len = $list.length;
                    var i = len;
                    var w = parseInt($obj.css('width'));
                    var h = parseInt($obj.css('height'))-30;
                    show_imgbox();
                    var tid = window.setInterval(function(){
                        show_imgbox();
                    },t*1000);
                    function show_imgbox(){
                        i += 1;
                        if(i>=len) i = 0;
                        var $img = $($list[i]);
                        var title = $img.attr('title');
                        var url = $img.attr('href');
                        var src = $img.find('img').attr('src');
                        var $panel = $('div.imgbox_panel',$obj);
                        if($panel.length==0){
                            $panel = $('<div><a href="#"><img src="" border="0" /></a><p style="height:30px;line-height:30px;text-align:center;margin:0 auto;background:#EEE;position:absolute;"><a href="#" style="font-weight:700;">loading...</a></p></div>').attr('class','imgbox_panel');
                            $panel.find('p').css({
                                'width' : w+'px',
                                'left' : '0px',
                                'top' : h+'px'
                            });
                            $panel.find('img').css({
                                'width' : w+'px',
                                'height' : h+'px',
                                'border' : 0
                            }).attr('width',w+'px').attr('height',h+'px');
                            $obj.append($panel);
                            $panel.mouseover(function(e){
                                window.clearInterval(tid);
                            }).mouseout(function(e){
                                tid = window.setInterval(function(){
                                    show_imgbox();
                                },t*1000);
                            });
                        }
                        $panel.find('img').attr('src',src);
                        $panel.find('a').attr('href',url).attr('title',title);
                        $panel.find('a:last').html(title);
                        var $u = $('ul.imgbox_num',$obj);
                        if($u.length==0){
                            $u = $('<ul style="display:block;list-style-type:none;overflow:hidden;zoom:1;position:absolute;left:0;top:0;visibility:hidden;text-align:left;padding:0;margin:0;" />').attr('class','imgbox_num').css('width',len*29+'px');
                            for(var i2 = 1;i2<=len;i2++){
                                $('<li style="display:block;width:20px;height:20px;line-height:20px;text-align:center;vertical-align:middle;float:left;margin:0 3px;border:1px #777 solid;font-weight:700;color:#000;cursor:pointer;" />').html(i2).appendTo($u);
                            }
                            $u.css({
                                'left' : (w-$u.width()-5)+'px',
                                'top' : (h-$u.height()-$panel.find('p').height()-0)+'px',
                                'visibility' : 'visible'
                            });
                            $obj.append($u);
                            $u.find('li').mouseover(function(e){
                                window.clearInterval(tid);
                                i = parseInt($(this).html()) - 2;
                                if(i<0) i = len;
                                show_imgbox();
                            }).mouseout(function(e){
                                tid = window.setInterval(function(){
                                    show_imgbox();
                                },t*1000);
                            });
                        }
                        var $uli = $u.find('li');
                        $uli.css({
                            'border' : '1px #777 solid',
                            'color' : '#000'
                        });
                        $($uli[i]).css({
                            'border' : '1px #F60 solid',
                            'color' : '#f60'
                        });
                    }
                });
            }
        });
        
    })(jQuery);
    jQuery(function($){
        $('div.imgbox').imgbox();
    });
    </script>
    </head>
    <body>
    <div class="imgbox">
    <div class="list">
    <a href="http://www.ablanxue.com" title="baidu"><img src="images/1.jpg" border="0" /></a>
    <a href="http://www.ablanxue.com" title="Google"><img src="images/2.jpg" border="0" /></a>
    <a href="http://www.ablanxue.com" title="163"><img src="images/3.jpg" border="0" /></a>
    <a href="http://www.ablanxue.com" title="baidu"><img src="images/4.jpg" border="0" /></a>
    </div>
    </div>
    <div class="imgbox">
    <div class="list">
    <a href="http://www.ablanxue.com" title="baidu"><img src="images/1.jpg" border="0" /></a>
    <a href="http://www.ablanxue.com" title="Google"><img src="images/2.jpg" border="0" /></a>
    <a href="http://www.ablanxue.com" title="163"><img src="images/3.jpg" border="0" /></a>
    <a href="http://www.ablanxue.com" title="baidu"><img src="images/4.jpg" border="0" /></a>
    </div>
    </div>
    </body>
    </html>