slider图片轮换 - jquery.slider.js，图片轮换效果，类似flash的图片轮换

回到相关文章 »

使用方法：

1.引入jquery.js
  1. <script src="http://apps.bdimg.com/libs/jquery/1.4.4/jquery.min.js"></script>  
2.引入slider.js
  1. <script src="js/slider.js"></script>  
3.加入css样式
  1. <style>   
  2. .entry { width: 675px; height: 213px; min-height: 0; margin: 50px auto; padding: 6px; background-color: #f4ecdf; border: #dbcdae solid 1px; position: relative; }   
  3. #center {   
  4.     Z-INDEX: 2; rightright: 40%;   
  5. }   
  6. #slider {   
  7.     Z-INDEX: 1; POSITION: absolute; WIDTH: 675px; BACKGROUND: #000; HEIGHT: 213px; OVERFLOW: hidden; LEFT: 6px;   
  8. }   
  9. #slider .slide {   
  10.     Z-INDEX: 10; POSITION: absolute; BORDER-LEFT: #000 1px solid; WIDTH: 405px; BACKGROUND: #000; HEIGHT: 213px; OVERFLOW: hidden; CURSOR: default; LEFT: 22px  
  11. }   
  12. #slider .title {   
  13.     COLOR: #f80; FONT-SIZE: 1.2em; FONT-WEIGHT: bold; MARGIN-RIGHT: 1.5em; TEXT-DECORATION: none  
  14. }   
  15. #slider .text {   
  16.     POSITION: absolute; line-height:30px; TEXT-ALIGN: justify; WIDTH: 405px; FONT-FAMILY: verdana, arial, Helvetica, sans-serif; COLOR: #fff; FONT-SIZE: 0.9em; TOP: 100%; LEFT: 10px  
  17. }   
  18. #slider .backgroundText { height:30px; position:absolute; background:#000; FILTER: alpha(opacity=60); width:405px; opacity: 0.6;}   
  19. #slider .diapo {   
  20.     POSITION: absolute; FILTER: alpha(opacity=100); VISIBILITY: visible; opacity: 1; width: 405px; height: 213px;   
  21. }   
  22. </style>   
4.页面html代码
  1. <div class="entry">  
  2.     <div id="center">  
  3.         <div id="slider">  
  4.             <div class="slide" style="border-left: medium none;"><a href="javascript:;"><img border="0" src="http://cued.xunlei.com/demos/publ/img/P_011.jpg" class="diapo" style="opacity: 0.7; visibility: visible;"></a>  
  5.                 <div class="text">"包装能手"的比拼拉启第二届詹氏技能比赛序幕</div>  
  6.             </div>  
  7.             <div class="slide"><a href="javascript:;"><img border="0" src="http://cued.xunlei.com/demos/publ/img/P_012.jpg" class="diapo" style="opacity: 0.7; visibility: visible;"></a>  
  8.                 <div class="text">浓情端午 乐在粽中</div>  
  9.             </div>  
  10.             <div class="slide"><a href="javascript:;"><img border="0" src="http://cued.xunlei.com/demos/publ/img/P_013.jpg" class="diapo" style="opacity: 0.7; visibility: visible;"></a>  
  11.                 <div class="text">比拼拉启第二届詹氏技能比赛序幕</div>  
  12.             </div>  
  13.             <div class="slide"><a href="javascript:;"><img border="0" src="http://cued.xunlei.com/demos/publ/img/P_014.jpg" class="diapo" style="opacity: 0.7; visibility: visible;"></a>  
  14.                 <div class="text">"篮球!篮球!"</div>  
  15.             </div>  
  16.             <div class="slide"><a href="javascript:;"><img border="0" src="http://cued.xunlei.com/demos/publ/img/P_015.jpg" class="diapo" style="opacity: 0.7; visibility: visible;"></a>  
  17.                 <div class="text">"我是快乐女人"&mdash;公司欢度"三八"节活动精彩纷呈</div>  
  18.             </div>  
  19.         </div>  
  20.     </div>  
  21. </div>  
  22. <script type="text/javascript">  
  23. /* ==== start script ==== */   
  24. slider.init();   
  25. </script>  

效果：

"包装能手"的比拼拉启第二届詹氏技能比赛序幕
浓情端午 乐在粽中
比拼拉启第二届詹氏技能比赛序幕
"篮球!篮球!"
"我是快乐女人"—公司欢度"三八"节活动精彩纷呈
JS下载：slider.js <单击右键另存为