花了半小时写的插件，没有仔细测试和优化。应该还有优化的空间（绝对有）
页面的效果都是从其他地方拷来的，所以可能有点不对。。。将就点吧。。
XML/HTML代码
- <!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>
其他不多说了。。。
#1