首页>>焦点图>>旋转按钮焦点图slide(2016-06-13)

旋转按钮焦点图slide

旋转按钮焦点图slide
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div class="rotating-slideshow" style="margin-top:10px;">  
  2.         <div id="slider-main" data-position="1" data-deg="0">  
  3.             <div id="slider-btns" class="button">  
  4.                 <a id="pos1" href="#" class="pos1" data-position="1"></a>  
  5.                 <a id="pos2" href="#" class="pos2" data-position="4"></a>  
  6.                 <a id="pos3" href="#" class="pos3" data-position="3"></a>  
  7.                 <a id="pos4" href="#" class="pos4" data-position="2"></a>  
  8.             </div>  
  9.             <div class="slider-overlay">  
  10.                 <div class="active" data-position="1">  
  11.                     <h3>jQuery </h3>  
  12.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum tincidunt sem. Nulla ipsum lorem, interdum vel tincidunt sit amet, aliquam sit amet lectus. Mauris eu tincidunt sapien. </p>  
  13.                 </div>  
  14.                 <div data-position="2">  
  15.                     <h3>rotatingSlideshow</h3>  
  16.                     <p>Integer ac libero nec velit rhoncus ultricies ut vel ligula. Sed ullamcorper fermentum ullamcorper. Mauris placerat quam non nunc feugiat, vel sagittis urna iaculis. </p>  
  17.                 </div>  
  18.                 <div data-position="3">  
  19.                     <h3>Plugin</h3>  
  20.                     <p>Nullam sit amet est iaculis, auctor nunc eu, lobortis justo. Nam tempor quam eget rutrum fringilla. Praesent ut molestie massa.</p>  
  21.                 </div>  
  22.                 <div data-position="4">  
  23.                     <h3>Demo</h3>  
  24.                     <p>Pellentesque tristique sem ac leo sollicitudin, id luctus ex semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>  
  25.                 </div>  
  26.             </div>  
  27.   
  28.             <img class="spinner-btn" src="images/button.png" alt="">  
  29.             <img class="spinner" src="images/slides-overlay.jpg" alt="">  
  30.         </div>  
  31.         <audio id="slider-sound" preload="auto">  
  32.             <source src="sound/sound.mp3">  
  33.             This browser does not support the HTML5 audio tag.  
  34.         </audio>   
  35.     </div>  

 

JavaScript Code
  1. <script>  
  2.     $(document).ready(function(){  
  3.       $('.rotating-slideshow').rotatingSlideshow({  
  4.         sliderHolder: '#slider-main',  
  5.         btnsHolder: '#slider-btns',  
  6.         audioHolder: '#slider-sound',  
  7.         auto: true,  
  8.         autoSpeed: '6000'  
  9.       });  
  10.     });  
  11.     </script>  

 


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