这是一款jquery环状轮播图插件。该环状轮播图插件采用响应式设计,可以在移动手机设备上运行。它基于CSS3 transform和 clip-path属性,IE浏览器不支持这个插件。
使用方法
在页面中引入rotating-slider.css、jquery和rotating-slider.js文件。
<link rel="stylesheet" href="rotating-slider.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/rotating-slider.js"></script>
HTML结构
该jquery环状轮播图HTML结构如下:
<div class="rotating-slider"> <ul class="slides"> <li> <div class="inner"> <h2>jQuery Rotating Slider</h2> <p>A fancy rotator plugin.</p> </div> </li> <li> <div class="inner"></div> </li> <li> <div class="inner"> <h2>Slide 2</h2> <p>This is slide 2</p> </div> </li> <li> <div class="inner"> </div> </li> <li> <div class="inner"> <h2>Slide 3</h2> <p>This is slide 3</p> </div> </li> <li> <div class="inner"> <h2>Slide 4</h2> <p>This is slide 4</p> </div> </li> </ul> </div>
初始化插件
在页面DOM元素加载完毕之后,通过rotatingSlider()
方法来对该jquery环状轮播图插件进行初始化。
$(function(){ $('.rotating-slider').rotatingSlider(); });
配置参数
该jquery环状轮播图插件的可用配置参数如下:
$(function(){ $('.rotating-slider').rotatingSlider({ // 自动播放 autoRotate: true, // 自动播放的时间间隔 autoRotateInterval: 6000, // 是否可以拖拽? draggable: true, // 轮播图的左右控制按钮 directionControls: true, directionLeftText: '‹', directionRightText: '›', // 动画速度 rotationSpeed: 750, // 轮播图的尺寸 slideHeight : 360, slideWidth : 480, }); });
该jquery环状轮播图插件的githhub地址为:https://github.com/tylernj42/Rotating-Slider-jQuery-Plugin
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!