首页>>焦点图>>bxslider全屏，固定高度焦点图演示(2016-05-24)

bxslider全屏，固定高度焦点图演示

bxslider全屏，固定高度焦点图演示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2. // Slideshow  
  3. $(function(){  
  4.     $("#sliderbox").hover(function(){  
  5.         $("#sliderbox .bx-prev").fadeIn();  
  6.         $("#sliderbox .bx-next").fadeIn();  
  7.     },function(){  
  8.         $("#sliderbox .bx-prev").fadeOut();  
  9.         $("#sliderbox .bx-next").fadeOut();  
  10.     });  
  11.     $('#slideshow').bxSlider({  
  12.         mode: 'fade', /*'horizontal', 'vertical'*/  
  13.         controls: true,  
  14.         nextSelector: '#slider-next',  
  15.         prevSelector: '#slider-prev',  
  16.         prevText: 'Prev',  
  17.         nextText: 'Next',  
  18.         auto: true,  
  19.         speed: 500,  
  20.         pause: 5000,  
  21.         pager: true  
  22.     });  
  23. });  
  24. </script>  
XML/HTML Code
  1. <div id="sliderbox">  
  2.     <div id="slidebanner"><div class="banner-shadow"></div>  
  3.     <ul id="slideshow">  
  4.           
  5.     <li><a href="#"><img src="banner01.jpg" alt="" /></a></li>  
  6.     <li><a href="#"><img src="banner03.jpg" alt="" /></a></li>  
  7.     </ul>  
  8.     </div>  
  9.     <div class="outside">  
  10.       <span id="slider-prev"></span>  
  11.       <span id="slider-next"></span>  
  12.     </div>  
  13. </div><!-- Slideshow end -->  

 


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