轻量级jQuery幻灯片切换插件

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

 21999  239  查看评论 (41)
轻量级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,执行如下脚本:

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

jQuerh H5移动端图片预览插件fly_zomm_img.js

H5图标浏览插件,支持多图识别切换,支持手势放大切换
  图片展示
 9320  28

jQuery鼠标滚轮放大缩小查看图片(原创)

使用jquery实现点击放大图片之后,使用鼠标滚轮放大缩小图片,点击遮罩关闭图片
  图片展示
 1089  9

仿微信朋友圈图片展示效果

仿微信朋友圈图片展示效果
  图片展示
 29095  154

仿qq空间图片展示效果

使用方法简单详细,类似于qq空间的图片展示效果
  图片展示
 23103  166

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

    A9527 0
    2018/4/18 14:56:30
    ~凉心凉忆~ 0
    2018/3/26 13:09:16
    bug <li></li>超过9个的话,第一张图片会显示两次啊
        西瓜0
        2018/3/26 16:02:05
        不是9个的问题,这个插件所放的数量一定要是奇数,不能是偶数。
    回复
    忆明人 0
    2017/12/13 16:47:03
    vision 0
    2017/11/24 17:51:08
    ?合金 0
    2017/11/20 22:43:03
    这个可以有啊啊 回复
    Xun 0
    2017/10/21 19:50:30

    666

        590
        2017/10/25 10:36:25

        6

    回复
    9380184@qq.com 0
    2017/10/14 17:35:05

    看起来不错,用一下试试

        忆明人0
        2017/12/13 16:47:48

        不错的

    回复
    L X 0
    2017/9/14 10:07:29

    如何设置显示图片的个数

    回复
    L X 0
    2017/9/13 16:04:16
    磊磊 0
    2017/9/10 16:37:46

    可以用吗

        蛰伏0
        2018/4/20 17:31:44
        可以
    回复
取消回复