<!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>
js最简单幻灯片切换支持同一页面多次调用
最新推荐文章于 2024-04-24 09:22:16 发布