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

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

使用方法

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

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

HTML结构

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

<div class="rotating-slideshow">
    <div id="slider-main" data-position="1" data-deg="0">
        <div id="slider-btns" class="button">
            <a id="pos1" href="#" class="pos1" data-position="1"></a>
            <a id="pos2" href="#" class="pos2" data-position="4"></a>
            <a id="pos3" href="#" class="pos3" data-position="3"></a>
            <a id="pos4" href="#" class="pos4" data-position="2"></a>
        </div>
        <div class="slider-overlay">
            <div class="active" data-position="1">
                <h3>Different</h3>
              <p>Optional text goes here</p>
            </div>
            <div data-position="2">
                <h3>Creative</h3>
              <p>Optional text goes here</p>
            </div>
            <div data-position="3">
                <h3>Fancy</h3>
              <p>Optional text goes here</p>
            </div>
            <div data-position="4">
                <h3>Solutions</h3>
              <p>Optional text goes here</p>
            </div>
        </div>
        <div class="slides">
            <img class="active" src="images/slide1.jpg" data-position="1">
            <img src="images/slide4.jpg" data-position="2">
            <img src="images/slide3.jpg" data-position="3">
            <img src="images/slide2.jpg" data-position="4">
        </div>
        <img class="spinner-btn" src="images/button.png" alt="">
        <img class="spinner" src="images/slides-overlay.jpg" alt="">
    </div>
    <audio id="slider-sound" preload="auto">
        <source src="sound/sound.mp3">
        你的浏览器不支持HTML5 AUDIO元素。
      </audio> 
</div>             
                

初始化插件

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

$(document).ready(function(){
  $('.rotating-slideshow').rotatingSlideshow({
    sliderHolder: '#slider-main',
    btnsHolder: '#slider-btns',
    audioHolder: '#slider-sound',
    auto: true,
    autoSpeed: '6000'
  });
});                 
                

配置参数

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

• sliderHolder：父包裹元素的ID。
• btnsHolder：按钮包裹元素的ID。
• audioHolder：音效元素的包裹元素ID。
• auto：是否自动播放幻灯片。
• autoSpeed：幻灯片自动播放的延迟时间，单位毫秒。

jQuery.rotatingSlideshow幻灯片插件的github地址为：https://github.com/alexmicic/jQuery.rotatingSlideshow。