首页>>焦点图>>jquery图片切换插件制作左右按钮与标题文字图片切换(2013-10-27)

jquery图片切换插件制作左右按钮与标题文字图片切换

 本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js，到演示页面可以查看

jquery图片切换插件制作左右按钮与标题文字图片切换
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

CSS Code
  1. <style type="text/css">  
  2. *{margin:0;padding:0;list-style-type:none;}  
  3. a,img{border:0;}  
  4. /* ui-banner */  
  5. .ui-banner{display:block;position:relative;width:820px;margin:20px auto;}  
  6. .ui-banner.ui-banner-invalid{display:none;}  
  7. .ui-banner,.ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{height:233px;}  
  8. .ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{position:absolute;top:0;}  
  9. .ui-banner ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}  
  10. .ui-banner .ui-banner-slides{width:654px;height:233px;left:1px;}  
  11. .ui-banner .ui-banner-slides li{display:none;position:absolute;}  
  12. .ui-banner .ui-banner-slides li img{width:654px;height:233px;border:none;}  
  13. .ui-banner .ui-banner-slides li.ui-banner-slides-current,.ui-banner .ui-banner-slides li.ui-banner-slides-prev,.ui-banner .ui-banner-slides li.ui-banner-slides-next{display:block;}  
  14. .ui-banner .ui-banner-slides li.ui-banner-slides-current{left:0;}  
  15. .ui-banner .ui-banner-slides li.ui-banner-slides-prev{left:-654px;}  
  16. .ui-banner .ui-banner-slides li.ui-banner-slides-next{left:654px;}  
  17. .ui-banner .ui-banner-slogans{background:#009AC9;height:213px;overflow:hidden;padding:10px 30px 10px 15px;width:118px;rightright:0;}  
  18. .ui-banner .ui-banner-slogans li{cursor:pointer;color:#8DC4EC;text-align:left;font-weight:bold;font-size:12px;line-height:14px;padding:10px 0 10px 10px;margin-left:5px;border-bottom:1px solid #79B4DF;list-style:none;list-style-type:none;}  
  19. .ui-banner .ui-banner-slogans li.ui-banner-slogans-current{color:#FFF;}  
  20. .ui-banner .ui-banner-slogans li.ui-banner-slogans-prev{border-bottom:none;}  
  21. .ui-banner .ui-banner-arrow{display:block;width:45px;outline:none;}  
  22. .ui-banner .ui-banner-arrow.ui-banner-arrow-prev{left:-14px;top:100px;background:transparent url("images/hero-slider-arrow-left.png") no-repeat 0 0;}  
  23. .ui-banner .ui-banner-arrow.ui-banner-arrow-next{left:630px;top:100px;background:transparent url("images/hero-slider-arrow-right.png") no-repeat 0 0;}  
  24. .ui-banner .ui-banner-arrow.ui-banner-arrow-next img{left:-15px;}  
  25. .ui-banner .ui-banner-overlay{bottombottom:0;height:10px;position:absolute;rightright:0;width:173px;}  
  26. </style>  

 

XML/HTML Code
  1. <div id="banners" class="ui-banner">  
  2.     <ul class="ui-banner-slides">  
  3.     <li><a href=""><img src="../dalian.jpg" alt="" title=""></a></li>  
  4.     <li><a href=""><img src="../erlianhaote.png" alt="" title=""></a></li>  
  5.     <li><a href=""><img src="../mohe.png" alt="" title=""></a></li>  
  6.     <li><a href=""><img src="../sanya.jpg" alt="" title=""></a></li>  
  7.     <li><a href=""><img src="../xianggang.jpg" alt="" title=""></a></li>  
  8.     <li><a href=""><img src="../zhoushan.jpg" alt="" title=""></a></li>     
  9.     </ul><!--ui-banner-slides end-->  
  10.     <ul class="ui-banner-slogans">  
  11.     <li>大连</li>  
  12.     <li>二连浩特</li>  
  13.     <li>漠河</li>  
  14.     <li>三亚</li>  
  15.     <li>香港</li>  
  16.     <li>舟山</li>  
  17.     </ul><!--ui-banner-slogans end-->  
  18. <a href="" class="ui-banner-arrow ui-banner-arrow-prev png_bg"></a><a href="" class="ui-banner-arrow ui-banner-arrow-next png_bg"></a><div class="ui-banner-overlay png_bg"></div></div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function(){  
  3.     $('#banners').bannerize({  
  4.         shuffle: 1,  
  5.         interval: "5"  
  6.     });  
  7. });  
  8. </script>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_80.html