幻灯片/轮播
带音效的旋转式jQuery幻灯片插件
PetitQ
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：幻灯片自动播放的延迟时间，单位毫秒
github 地址：https://github.com/alexmicic/jQuery.rotatingSlideshow
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
