轻量级jQuery幻灯片切换插件

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

 47873  607  查看评论 (49)
分享到微信朋友圈
X
轻量级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加vue 3D盒子旋转展示

3D旋转盒子,全景展示,可选择图片,设置宽高
  图片展示
 33602  363

javascript动感相册

javascript实现动感相册,放大缩小,不依赖其它库
  图片展示
 47702  393

移动端仿淘宝造物节3d

html5场景淘宝造物节3D酷炫空间专题页面模板
  图片展示
 30933  475

焦点效果

类似于百叶窗的效果
  图片展示
 34564  362

讨论这个项目(49)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    瞳瞳 0
    2019/6/19 14:35:14
    可以竖着轮播吗 回复
    一只仙人球 0
    2018/11/5 14:47:18
    如果只有三张的话,切换动画就变得非常诡异... 回复
    厌世 0
    2018/6/14 1:03:35
    下载了不会用怎么办0 0QAQ 新手求教
        microsoftvs0
        2018/6/14 1:30:21
        引用好对应的代码就行了,实在不行就在演示文件上进行修改啦。
        厌世0
        2018/6/14 9:54:49
        我在试试 做完没弄好QAQ
    回复
    WNM 0
    2018/5/22 10:33:36
    怎么修改最后一张到第一张的时候隐藏切换 回复
    A9527 0
    2018/4/18 14:56:30
    怎么获取jQ币
        蛰伏0
        2018/5/13 16:53:49
        登录签到
    回复
    ~凉心凉忆~ 0
    2018/3/26 13:09:16
    bug <li></li>超过9个的话,第一张图片会显示两次啊
        西瓜0
        2018/3/26 16:02:05
        不是9个的问题,这个插件所放的数量一定要是奇数,不能是偶数。
        开心^-^0
        2019/8/7 9:38:37
        这么奇葩啊
    回复
    忆明人 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

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复