幻灯片/轮播

带音效的旋转式jQuery幻灯片插件

创客主机


rotatingSlideshow是一款带音效的旋转式jQuery幻灯片插件。该幻灯片的导航类似一个旋转按钮,通过点击按钮的相应区域可以使幻灯片以旋转的方式来切换图片,非常有创意

使用方法:

实用该Tabs选项卡插件需要在页面中引入jquery.rotatingSlideshow.css文件,jquery1.9+和jquery.rotatingSlideshow.js文件。

  1. <link type="text/css" rel="stylesheet" href="css/jquery.rotatingSlideshow.css">
  2. <script type="text/javascript" src="js/jquery.min.js"></script>
  3. <script type="text/javascript" src="js/jquery.rotatingSlideshow.js"></script>

HTML结构:

该幻灯片的基本HTML结构如下:

  1. <div class="rotating-slideshow">
  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>Different</h3>
  12.               <p>Optional text goes here</p>
  13.             </div>
  14.             <div data-position="2">
  15.                 <h3>Creative</h3>
  16.               <p>Optional text goes here</p>
  17.             </div>
  18.             <div data-position="3">
  19.                 <h3>Fancy</h3>
  20.               <p>Optional text goes here</p>
  21.             </div>
  22.             <div data-position="4">
  23.                 <h3>Solutions</h3>
  24.               <p>Optional text goes here</p>
  25.             </div>
  26.         </div>
  27.         <div class="slides">
  28.             <img class="active" src="images/slide1.jpg" data-position="1">
  29.             <img src="images/slide4.jpg" data-position="2">
  30.             <img src="images/slide3.jpg" data-position="3">
  31.             <img src="images/slide2.jpg" data-position="4">
  32.         </div>
  33.         <img class="spinner-btn" src="images/button.png" alt="">
  34.         <img class="spinner" src="images/slides-overlay.jpg" alt="">
  35.     </div>
  36.     <audio id="slider-sound" preload="auto">
  37.         <source src="sound/sound.mp3">
  38.         你的浏览器不支持HTML5 AUDIO元素。
  39.       </audio> 
  40. </div>

初始化插件:

在页面DOM元素加载完毕之后,可以通过rotatingSlideshow()方法来初始化该幻灯片插件。

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

配置参数:

jQuery.rotatingSlideshow幻灯片插件的可用配置参数有:

sliderHolder:父包裹元素的ID

btnsHolder:按钮包裹元素的ID

audioHolder:音效元素的包裹元素ID

auto:是否自动播放幻灯片

autoSpeed:幻灯片自动播放的延迟时间,单位毫秒
github地址:https://github.com/alexmicic/jQuery.rotatingSlideshow

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!