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。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!