轻量级jQuery幻灯片切换插件

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

 4321  51  查看评论 (9)
轻量级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 360度旋转插件UIMIX.fullview

360度旋转图片展示jquery插件UIMIX.fullview
  图片展示
 13469  81

标准的放大镜效果(商品展示)

电商可用的商品展示效果
  图片展示
 6263  79

jQuery+CSS3图片遮罩和过渡动画效果

这是一款通过jquery和css3制作的图片遮罩和过渡动画效果。该效果通过图片制作和CSS transfms动画来制作页面过渡动画效果,非常炫酷。
  图片展示
 2405  14

仿天猫商品品牌图片墙换一批动画特效

这是一款使用纯js和CSS3来制作的仿天猫商品品牌图片墙换一批动画特效。该特效中,当用户点击了品牌图片墙上右下角的按钮时,所有的品牌图片会水平翻转360度,然后显示另外一批品牌图片。
  图片展示
 4966  64

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

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

    ie11兼容?

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

        兼容的,

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

        充JQ呀

        蛰伏0
        2017/4/17 14:30:47
        签到就有jq币
    回复
    yBoy 0
    2017/4/14 16:11:01

    有点卡卡的

        蛰伏0
        2017/4/22 14:34:42

        初始一个插件试试

    回复
    九歌、 0
    2017/4/14 13:42:35
    lxhtml 0
    2017/4/13 18:37:18
取消回复