风吹起如花般破碎的流年，而你的笑容摇晃摇晃，成为我命途中最美的点缀!
Php爱好者新版上线啦！
-11 19

常用js效果三：简单的js+div+css幻灯片效果-Jquery幻灯片焦点图插件

Category:jquery学习 View: Author:燕子

        js幻灯片也是网站经常用到的，在懒人图库上面找到一个比较好用的，分享给大家，css基本上不用改，需要元素结构也很简单，只需要调用函数。先给大家看下简单的代码。

XML/HTML代码
  1. javascript:  
  2.   
  3.     $(function(){  
  4.         $("#KinSlideshow").KinSlideshow({  
  5.                 moveStyle:"right",  
  6.                 titleBar:{titleBar_height:30,titleBar_bgColor:"#08355c",titleBar_alpha:0.5},  
  7.                 titleFont:{TitleFont_size:12,TitleFont_color:"#FFFFFF",TitleFont_weight:"normal"},  
  8.                 btn:{btn_bgColor:"#FFFFFF",btn_bgHoverColor:"#1072aa",btn_fontColor:"#000000",  
  9.                      btn_fontHoverColor:"#FFFFFF",btn_borderColor:"#cccccc",  
  10.                      btn_borderHoverColor:"#1188c0",btn_borderWidth:1}  
  11.         });  
  12.     })  
  13.     
  14.   
  15. HTML:  
  16.   
  17.   <div id="KinSlideshow" style="visibility:hidden;">  
  18.       <a href="http://www.lanrentuku.com" target="_blank"><img src="images/1.jpg" alt="这是标题一" /></a>  
  19.       <a href="http://www.lanrentuku.com" target="_blank"><img src="images/2.jpg" alt="这是标题二" /></a>  
  20.       <a href="http://www.lanrentuku.com" target="_blank"><img src="images/3.jpg" alt="这是标题三" /></a>  
  21.       <a href="http://www.lanrentuku.com" target="_blank"><img src="images/4.jpg" alt="这是标题四" /></a>  
  22.       <a href="http://www.lanrentuku.com" target="_blank"><img src="images/5.jpg" alt="这是标题五" /></a>  
  23.       <a href="http://www.lanrentuku.com" target="_blank"><img src="images/6.jpg" alt="这是标题六" /></a>  
  24.   </div>  
  25.     

是不是很简单，确实很简单。不管你信不信你，我反正是信了，而且我还用过了。

演示地址：http://www.phplover.cn/demo/fdp/demo3.html


本文来源于php爱好者：php教程 —http://www.phplover.cn/
原文地址：http://www.phplover.cn/post/443.html

js  jquery  javascript   评论(8)

相关文章:

  • 评论(8)
发表评论 TrackBack

发表评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。