响应式全屏图像滑块插件- scaleslider.js

响应式全屏图像滑块插件- scaleslider.js

scaleslider.js是一个轻量级的,反应灵敏,全屏jQuery图像滑块插件,允许以组图的方式来切换图像,通过CSS3的过滤效果实现。

使用方式

1.引入滑块所需的样式文件style.compressed.css

<link rel="stylesheet" href="css/style.compressed.css">

2.创建一组图像和图像切换的箭头

<div class="singleSlide">
  <div class="singleSlideContainer">
    <img src="http://static.zzyzan.com/qiniu/8353/image/4a47a0db6e60853dedfcfdf08a5ca249.png">
    <img src="http://static.zzyzan.com/qiniu/8353/image/fb5c81ed3a220004b71069645f112867.png">
    <img src="http://static.zzyzan.com/qiniu/8353/image/10fb15c77258a991b0028080a64fb42d.png">
    <img src="http://static.zzyzan.com/qiniu/8353/image/09dd8c2662b96ce14928333f055c5580.png">
    <img src="http://static.zzyzan.com/qiniu/8353/image/8266e4bfeda1bd42d8f9794eb4ea0a13.png">
    ...
  </div>

  <div class="singleArrow saLeft"></div>
  <div class="singleArrow saRight"></div>
  <div class="singleDotsContainer"></div>
</div>

3.将jQuery库文件和scaleslider.min.js脚本放在网页底部使网页加载速度更快

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/scaleslider.min.js"></script>

4.调用函数

$('.singleSlide').scaleslider();

5.插件默认选项

sliderWidth     : '100%',
sliderHeight    : 300,
dotNavigation   : true,
arrowNavigation : true,
keyNavigation   : true
下载 在线预览 积分 (-2) 吐槽 (1)
  • 版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容, 欢迎发送邮件至 postmaster@zzyzan.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
  • 本作品是由 小乖乖资源共享网 会员 时间的灰烬 的投递作品。
  • 欢迎转载,但请务必注明来源地址:http://www.zzyzan.com/web/banner/8353.html

- 评论

  • 加载中,请稍候…
我要吐槽