背景平铺的幻灯片插件FourBoxes

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

 36320  345  查看评论 (2)
分享到微信朋友圈
X
背景平铺的幻灯片插件FourBoxes ie兼容10

请注意本插件将使用非常现代的CSS 属性,所以想要的效果将只是工作在最新的浏览器版本。

使用方法

引用所需要的样式

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />


以及所需要的js文件

<script src="js/classie.js"></script>
<script src="js/boxesFx.js"></script>
<script src="js/modernizr.custom.js"></script>


html结构

<div id="boxgallery" class="boxgallery" data-effect="effect-1">
    <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
    <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
    <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
    <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>


调用插件

<script>
new BoxesFx( document.getElementById( 'boxgallery' ) );
</script>


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

jquery实现图片浏览类似qq空间图片查看

利用layer.min.js插件进行实现
  幻灯片和轮播图
 37553  351

swiper横向轮播

swiper横向轮播,简单好用
  幻灯片和轮播图
 86730  573

jQuery幻灯片切换

jQuery网站宽屏banner幻灯片切换
  幻灯片和轮播图
 30431  381

jQuery制作手机网页图片滚动切换支持拖动功能焦点图特效

jQuery制作手机网页图片滚动切换支持拖动功能焦点图特效
  幻灯片和轮播图
 40904  330

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

    Andy 0
    2017/9/11 8:02:47

    最多只能有四张?

    回复
    ▓ 纯牛奶° 0
    2015/3/12 18:00:56
    可以用在手机上。谢了 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复