jQuery插件slicebox实现3D动画图片轮播切换特效

漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js，基于jQuery，插件采用CSS 3D 动画效果，支持事件Callback调用，支持参数自定义配置，如：speed：600 切换速度、autoplay:true 是否自动播放，在浏览器兼容方面，需要浏览器支持CSS3变换变形属性，不支持的将看不到3D特效，推荐学习下代码。

使用方法：

1.加载插件和jQuery

<link type="text/css" rel="stylesheet" href="css/slicebox.css" />
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/jquery8.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>

2.HTML内容，HTML头部需要采用HTML5头 <!DOCTYPE html>

<ul id="sb-slider" class="sb-slider">
 <li>
<img src="images/1.jpg" alt="image1"/>
</li>
<li>
<img src="images/2.jpg" alt="image2"/>
</li>
<li>
<img src="images/3.jpg" alt="image2"/>
</li>
<li>
<img src="images/4.jpg" alt="image2"/>
</li>
<li>
<img src="images/5.jpg" alt="image2"/>
</li>
</ul>
<div>
<span onclick="$slicebox.previous();">上一页</span>
<span onclick="$slicebox.next();">下一页</span>
<span onclick="$slicebox.jump(4);">跳页</span>
</div>

3.函数调用

<script type="text/javascript">
var $slicebox; $(function() {
  $slicebox = $('#sb-slider').slicebox({
    interval:6000,
    orientation : "r", //表示幻灯片的切换方向，可取 (v)垂直方向, (h)水平方向 or (r)随机方向
    perspective : 800, //透视点距离，可以通过改变其值查看效果
    cuboidsCount : 5, //幻灯片横向或纵向被切割的块数，切割的每一块将会以3D的形式切换
    cuboidsRandom : true, //是否随机 cuboidsCount 参数的值
    maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount 值
    colorHiddenSides : "#333", //隐藏的幻灯片的颜色
    sequentialFactor : 150, //幻灯片切换时间（毫秒数）
    speed : 600, //每一块3D立方体的速度
    autoplay : true, //是否自动开始切换
    onBeforeChange : function(position) { return false; },
    onAfterChange : function(position) { return false; }
  });
});
</script>

参数说明:
orientation : "r", //表示幻灯片的切换方向，可取 (v)垂直方向, (h)水平方向 or (r)随机方向
perspective : 800, //透视点距离，可以通过改变其值查看效果
cuboidsCount : 5, //幻灯片横向或纵向被切割的块数，切割的每一块将会以3D的形式切换
cuboidsRandom : true, //是否随机 cuboidsCount 参数的值
maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount 值
colorHiddenSides : "#333", //隐藏的幻灯片的颜色
sequentialFactor : 150, //幻灯片切换时间（毫秒数）
speed : 600, //每一块3D立方体的速度
autoplay : true, //是否自动开始切换

演示demo  脚本下载

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • 基于jquery的图片轮播 tab切换组件

    目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动:none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失. Demo Address:http://demo.jb51.net/js/2012/sinaapp/ 复制代码 代码如下: /** * 巨无霸轮播 */ $.fn.loopSlider = function(option) { var setting = { // 默认显示的顺序 initIn

  • 原生js和jquery实现图片轮播特效

    原生js和jquery实现图片轮播特效

    (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

  • 原生js和jquery实现图片轮播淡入淡出效果

    原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

  • 基于jQuery实现左右图片轮播（原理通用）

    基于jQuery实现左右图片轮播（原理通用）

    本文为大家分享了jQuery实现左右图片轮播代码,供大家参考,具体实现内容如下 运行效果图: 重点!!! 实现原理: 通过判断index值的大小变化来判断图片左移还是右移.通过控制图片的left值,来达到一个轮播的效果. 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <scrip

  • 基于JQuery的实现图片轮播效果(焦点图)

    基于JQuery的实现图片轮播效果(焦点图)

    完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu

  • jQuery手动点击实现图片轮播特效

    jQuery手动点击实现图片轮播特效

    本文写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等. 下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边的大div设置的宽度为图片的宽度,超出大div宽度的都需要隐藏,但是对于盛放图片的小div设置宽度为2000px,大一点方便四张图左浮动布局 (3)当数字按钮点击时,获取按钮的

  • Jquery代码实现图片轮播效果（一）

    Jquery代码实现图片轮播效果（一）

    文章写的不好,还请各位高手指教,不废话了,先上张效果图吧看下: 在线演示         下载源码 首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前.向后按钮,使第一个索引按钮处于激活状态. 事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前.向后翻动.轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播. 下篇是一个纯粹的jquery轮播

  • jQuery图片轮播的具体实现

    jQuery图片轮播的具体实现

    效果如下: 先看一看html代码,以及对应的css代码: 复制代码 代码如下: <div id="scrollPics">    <ul class="slider" >        <li><img src="images/ads/1.gif"/></li>        <li><img src="images/ads/2.gif"/>&

  • jquery+css实现简单的图片轮播效果

    开发过程中需要用到图片轮播的插件,在网上找了几个插件之后还是决定自己码一个,比较简洁的功能,以后说不定还会有用. ps: 功能比较简单,整个框并不能根据图片的大小自动调节,这里所用的图片是1170*500的,如果需要改成其他大小的图片,自行修改.pic-list下img的宽度. .pic-list中的宽度为整个横幅的宽度,如果需要轮播的图片数量很多,.pic-list的宽度应大于数量*单张宽度, html <div class="banner"> <!--第一张图片为

  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

随机推荐