罗和正单双中特

带预览效果的炫酷js轮播图插件

所属分类?#22909;教?幻灯片和轮播图

分享到微?#25490;?#21451;圈
X
带预览效果的炫酷js轮播图插件 ie兼容11

使用方法:

在页面中引入preview-slider.min.css和preview-slider.min.js文件。

<link rel="stylesheet" href="css/preview-slider.min.css">
<script src="js/preview-slider.min.js"></script>
<script src="js/main.js"></script>

HTML结构:

该轮播图的基本HTML结构如下。

<div>
   <div>
       <img src="img/img1.jpg" alt=""></div>
       <img src="img/img2.jpg" alt=""></div>
       <img src="img/img3.jpg" alt=""></div>
   </div>
   <div></div>
   <div></div>
</div>

初始化插件:

在页面DOM元素加载完?#29616;?#21518;,通过下面的方法来初始化该轮播图插件。

new previewSlider({
   container: '.preview-slider',
   arrowLeft: '.preview-slider .arrow-left',
   arrowRight: '.preview-slider .arrow-right',
});

配置参数:

该轮播图的可用配置参数如下。

  • container:轮播图的容器。

  • arrowLeft:向前的导航按钮。

  • arrowRight:向后的导航按钮。

  • content:如果是true则表示使用div作为轮播图,否则使用img作为轮播图。

  • scale:缩略图的缩放比例,默认为0.4。

  • scrollSpeed:预览缩略图的滚动速度,默认为4。

相关插件-幻灯片和轮播图

图片轮播插件

源生js自动轮播图插件
  幻灯片和轮播图
 8253  18

jQuery轮播图/内容滑块插件Quake Slider

jQuery轮播图插件Quake Slider提供了24种过渡效果。
  幻灯片和轮播图
 15676  103

支持手机触摸滑动图片轮播

支持手机触摸滑动图片幻灯片轮播切换代码
  幻灯片和轮播图
 45273  515

js弧形轮播图插件

js很酷的弧形轮播图插件
  幻灯片和轮播图
 12346  53

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

    junyi5d 0
    2019/4/23 13:35:30
    虽然效果不错,但是切换需2次点击,以及加载等待,使得使用者的耐心是种考验。
    另外中间有页面,左右箭头未正常显示 回复
取消回复
  短信接口
罗和正单双中特