花了半小时写的插件,没有仔细测试和优化。应该还有优化的空间(绝对有)
页面的效果都是从其他地方拷来的,所以可能有点不对。。。将就点吧。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:209px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}
</style>
<script type="text/javascript" src="http://localhost/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$.fn.fadeImages = function( options ){
var defaults = {
timer:2000,
speed:'slow',
loading:'.loading',
message:'.num_list',
imgarea:'.d2',
ctlButton:'.button'
};
var opts = $.extend({},'',defaults,options||{});
var self = this;
var imgCount = $('ul li',self).length; //图片数
//$(self).css({'width':$('> ul li:first >img',self).width()});
$(' > ul', self).hide();
$('.d2').hide();
var cId = start = 1;
var tmp = [];
for (var i = 1; i <= imgCount ; i++ ){
tmp.push("<a class='b1'>"+ ( i )+"</a>");
}
$(opts.ctlButton).html( tmp.join(""));
var switchImages = function(){
return setInterval(function(){
if(start >= imgCount){
start = 0;
}
doSwitch(start);
start++;
},opts.timer);
}
var doSwitch = function( start ){
var current = $('>ul li:eq('+start+')',self);
$(opts.imgarea).fadeOut( opts.speed ,function(){$(this).fadeIn().html( $(current).html() )});
$('.num_list').html("<span style='margin-top:3ppx'>"+$(' img',current).attr('alt')+"</span>" );
$(opts.ctlButton + ' a:eq('+start+')').addClass('b2').removeClass('b1').siblings().addClass('b1').removeClass('b2');
}
$(opts.ctlButton+' a').hover(
function(){
clearInterval(cId);
start = $(this).index();
doSwitch(start);
},
function(){
start++;
cId = switchImages();
}
);
$(opts.loading).fadeOut('slow',function(){
doSwitch(0);
cId = switchImages();
});
}
$(function(){
$('#fade_focus').fadeImages();
})
</script>
<title>Javascript图片幻灯效果——neatstudio.com</title>
</head>
<body>
<div id="fade_focus">
<ul>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="http://www.alixixi.com//UploadPic/2009-3/200932411630872.jpg" alt="展示图片1" height="209" width="443"></a></li>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="http://www.alixixi.com//UploadPic/2009-3/200932411631990.jpg" alt="展示图片2" height="209" width="443"></a></li>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="http://www.alixixi.com//UploadPic/2009-3/200932411631905.jpg" alt="展示图片3" height="209" width="443"></a></li>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="http://www.alixixi.com//UploadPic/2009-3/200932411631473.jpg" alt="展示图片4" height="209" width="443"></a></li>
</ul>
<div class="loading">Loading...<br />
<img src="http://localhost/loading.gif" width="100" height="100" /></div>
<div style="opacity: 1;" class="d2"> <a href="http://www.wxwdesign.cn" target="_blank"><img src="http://localhost/1.jpg" alt="展示图片2" height="209" width="443"></a> </div>
<div style="opacity: 0.8;" class="num_list"> <span style="margin-top: 3px;">展示图片2</span> </div>
<div class="button"> <a class="b1">1</a><a class="b2">2</a><a class="b1">3</a><a class="b1">4</a> </div>
</div>
</body>
</html>
其他不多说了。。。