轻量级jQuery幻灯片切换插件

所属分类:媒体-图片展示,幻灯片和轮播图

 13031  148  查看评论 (24)
轻量级jQuery幻灯片切换插件 ie兼容6

使用方法

首先引入css文件和html结构html结构<div class='poster-main carousel' data-setting='{}'>

<div class='poster-btn poster-prev-btn'></div>
<ul class='poster-list'>
  <li class="list-item"> <a href="#"><img src="./image/01.jpg" alt=""></a> </li>
  <li class="list-item"> <a href="#"><img src="./image/02.jpg" alt=""></a> </li>
  <li class="list-item"> <a href="#"><img src="./image/03.jpg" alt=""></a> </li>
  <li class="list-item"> <a href="#"><img src="./image/04.jpg" alt=""></a> </li>
  <li class="list-item"> <a href="#"><img src="./image/05.jpg" alt=""></a> </li>
  <li class="list-item"> <a href="#"><img src="./image/06.jpg" alt=""></a> </li>
  <li class="list-item"> <a href="#"><img src="./image/07.jpg" alt=""></a> </li>
  <li class="list-item"> <a href="#"><img src="./image/08.jpg" alt=""></a> </li>
  <li class="list-item"> <a href="#"><img src="./image/09.jpg" alt=""></a> </li>
</ul>
<div class='poster-btn poster-next-btn'></div>
</div>

3.配置参数是通过属性值读取的,在data-setting={}配置相关参数

{
    "width": 1000, //幻灯片的宽度
    "height": 270, //幻灯片的高度
    "posterWidth": 640, //第一帧的高度
    "posterHeight": 270, //第一帧的宽度
    "verticalAlign": 'middle',
    "autoPlay": true,
    "speed": 500,
    "delay": 500,
    "scale": 0.9 //记录显示比例
},

须严格按照json格式配置。在文件中引入jquery插件和carouse.js,执行如下脚本:

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

JQUERY全屏撕裂幻灯片-FULLSCREEN-SLIT-SLIDER

fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片,接下来我就为大家讲解以下相关的用法。
  图片展示
 16235  86

jQuery点击图片预览并显示详情

jQuery点击图片预览并显示详情,加入购物车,适合简单的商城系统
  图片展示
 6894  145

视差图片展示特效

视差图片展示特效
  图片展示
 14559  79

纯js图片旋转

JavaScript图片特效
  图片展示
 9724  88

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

    扬扬 0
    2017/6/22 11:56:34
    ONE 0
    2017/6/16 14:25:54

    三个图片轮播的时候 有明显bug。是不是应该把没给li标签都设置不同的zindex。否则又覆盖问题??

        楼下小冬0
        2017/6/21 17:29:37

        我也遇到了这种问题,每个li设置不同的id还是会有一个重复的li,并且这个li里图片是空白的

    回复
    岁晚 0
    2017/6/8 10:55:17
    汪威镇一个人在唱歌 0
    2017/5/30 12:29:10

    自己的图片如果和你的图片大小不一样 该怎么改啊

    回复
    zjoldc 0
    2017/5/27 15:31:17

    这个和之前叫什么3d插件的代码不是一样的吗  效果都木有变

    回复
    ''小格调っ 0
    2017/5/23 16:12:55
    只能放9张图片?放大约9张图片他就会循环一个张图片两次,这个bug怎么解决 回复
    MR.D 0
    2017/5/15 15:42:47

    支持手机端吗?

        1995-0
        2017/5/19 9:31:21

        不支持

    回复
    hwe 0
    2017/5/4 9:29:41
    如果图片不固定大小的可以用吗
        Zico0
        2017/5/5 11:10:40

        不可以

    回复
    Eva 0
    2017/4/27 10:30:55

    ie11兼容?

        蛰伏0
        2017/4/29 16:22:08

        兼容的,

        情深缘浅0
        2017/5/11 10:11:10

        兼容

    回复
    . 0
    2017/4/14 19:05:43
    没jq币没法下载啊~!
        喜欢和不喜欢你都是我的0
        2017/4/16 0:01:14

        充JQ呀

        蛰伏0
        2017/4/17 14:30:47
        签到就有jq币
        情深缘浅0
        2017/5/11 11:02:15
        回答问题和签到也没有JQ币啊
        .0
        2017/6/14 11:37:23

        签到3天才一个JQ币

    回复
取消回复