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

最新推荐文章于 2025-12-30 09:00:23 发布
转载最新推荐文章于 2025-12-30 09:00:23 发布 · 976 阅读
文章标签：
#div #js #javascript #html
div+css 专栏收录该内容
89 篇文章
订阅专栏
本文介绍了一种使用JavaScript实现的轮播图片自动切换效果，包括样式设置、事件监听及图片展示逻辑。
<!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>