手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

JS小插件:图片轮换

首页 > Javascript >

花了半小时写的插件,没有仔细测试和优化。应该还有优化的空间(绝对有)

页面的效果都是从其他地方拷来的,所以可能有点不对。。。将就点吧。。

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <style type="text/css" media="all">  
  6. .d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}  
  7. .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;}  
  8. .d2{width:100%;height:209px;overflow:hidden;}  
  9. .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;}  
  10. .num_list span{display:inline-block;height:16px;padding-left:6px;}  
  11. img{border:0px;}  
  12. .button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}  
  13. .b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}  
  14. .b2{color:#FFCC33;background-color:#FF6633;}  
  15. </style>  
  16. <script type="text/javascript" src="http://localhost/jquery.min.js"></script>  
  17. <script language="javascript" type="text/javascript">  
  18. $.fn.fadeImages = function( options ){  
  19.     var defaults = {  
  20.         timer:2000,  
  21.         speed:'slow',  
  22.         loading:'.loading',  
  23.         message:'.num_list',  
  24.         imgarea:'.d2',  
  25.         ctlButton:'.button'  
  26.     };  
  27.     var opts = $.extend({},'',defaults,options||{});  
  28.     var self = this;  
  29.     var imgCount = $('ul li',self).length;  //图片数  
  30.     //$(self).css({'width':$('> ul li:first >img',self).width()});  
  31.     $(' > ul', self).hide();  
  32.     $('.d2').hide();  
  33.     var cId = start = 1;  
  34.     var tmp =  [];  
  35.     for (var i = 1; i <= imgCount ; i++ ){  
  36.         tmp.push("<a class='b1'>"+ ( i )+"</a>");  
  37.     }  
  38.     $(opts.ctlButton).html( tmp.join(""));  
  39.     var switchImages = function(){  
  40.         return setInterval(function(){  
  41.             if(start >= imgCount){  
  42.                 start = 0;  
  43.             }  
  44.             doSwitch(start);  
  45.             start++;  
  46.         },opts.timer);    
  47.     }  
  48.     var doSwitch = function( start ){  
  49.         var current = $('>ul li:eq('+start+')',self);  
  50.         $(opts.imgarea).fadeOut( opts.speed ,function(){$(this).fadeIn().html( $(current).html() )});  
  51.         $('.num_list').html("<span style='margin-top:3ppx'>"+$(' img',current).attr('alt')+"</span>" );  
  52.         $(opts.ctlButton + ' a:eq('+start+')').addClass('b2').removeClass('b1').siblings().addClass('b1').removeClass('b2');      
  53.     }  
  54.     $(opts.ctlButton+' a').hover(  
  55.         function(){  
  56.             clearInterval(cId);  
  57.             start = $(this).index();  
  58.             doSwitch(start);  
  59.         },  
  60.         function(){  
  61.             start++;  
  62.             cId = switchImages();  
  63.         }  
  64.     );  
  65.     $(opts.loading).fadeOut('slow',function(){  
  66.         doSwitch(0);  
  67.         cId = switchImages();  
  68.     });   
  69. }  
  70. $(function(){  
  71.     $('#fade_focus').fadeImages();  
  72. })  
  73. </script>  
  74. <title>Javascript图片幻灯效果——neatstudio.com</title>  
  75. </head>  
  76. <body>  
  77. <div id="fade_focus">  
  78.   <ul>  
  79.     <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>  
  80.     <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>  
  81.     <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>  
  82.     <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>  
  83.   </ul>  
  84.   <div class="loading">Loading...<br />  
  85.     <img src="http://localhost/loading.gif" width="100" height="100" /></div>  
  86.   <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>  
  87.   <div style="opacity: 0.8;" class="num_list"> <span style="margin-top: 3px;">展示图片2</span> </div>  
  88.   <div class="button"> <a class="b1">1</a><a class="b2">2</a><a class="b1">3</a><a class="b1">4</a> </div>  
  89. </div>  
  90. </body>  
  91. </html>  

其他不多说了。。。




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: jquery, 图片轮换

« 上一篇 | 下一篇 »

只显示10条记录相关文章

JQuery -- this 和 $(this) 的区别 (浏览: 85139, 评论: 3)
[转载]超强大的jquery formValidator (浏览: 50958, 评论: 3)
jQuery插件---获取URL参数 (浏览: 46251, 评论: 1)
jQuery的html()等方法介绍 (浏览: 45744, 评论: 1)
取得html中的comment的内容 (浏览: 41950, 评论: 2)
jQuery的bind函数 (浏览: 40744, 评论: 1)
将Yiiframework与JQuery easyUI整合使用 (浏览: 38198, 评论: 2)
jQuery一些插件的链接[转] (浏览: 37675, 评论: 2)
取消radio的选中状态 (浏览: 36858, 评论: 1)
JQuery学习第一天 (浏览: 35477, 评论: 3)

1条记录访客评论

js不是一般的长。。。

Post by unicac on 2010, July 28, 7:05 PM 引用此文发表评论 #1


发表评论

评论内容 (必填):