响应式全屏图像滑块插件- 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="1.png?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10">
    <img src="2.png?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10">
    <img src="3.png?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10">
    <img src="4.png?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10">
    <img src="5.png?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10">
    ...
  </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)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

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