分享另外一个jQuery的超酷幻灯插件：jQuery Chop Slider 2.0

日期：2011/12/08

?

在线演示2D??在线演示3D ??在线下载

?

在线演示(效果)? 在线演示(多个)

?

前段时间我们介绍过一款jQuery的超酷幻灯效果插 件：NivoSlider。今天我们将给大家来带另外一个绝对震撼的jQuery实现的幻灯slider插件：Chop Slider。 这个插件拥有了192个不同的变化效果，绝对能够满足你不同的变换需要。而且支持很多2D和3D的特效。更重要的是它支持了非CSS3的效果，这样你可以 有足够的空间去开发一款所有浏览器都支持的幻灯效果。而且支持开发自定义的变化效果。这需要你自己开发。以下是主要特性：

122个2D变换效果：这里有105个效果支持所有的浏览器，除了IE，在IE中的效果可能略有不同。不过总体来说还是很酷的。60个3D的变换效果：支持所有现代浏览器。支持：Chrome5个非CSS3的换效果：非常适合不支持CSS3的变化效果浏览器，例如，IE6-9(微软应该努努力了！）5个移动设备的变化效果：适合于移动设备上使用

这个插件提供如下版本：

jQuery Chop slider(核心插件）Chop slider 2 wordpress插件变换transitions类库 HTML标签

<div href="#"></a> ? <a id="slide-prev" href="#"></a>? <div id="slider">??? <div width="520" height="300" alt="分享除此而外一个jQuery的超酷幻灯插件：jQuery Chop Slider 2.0" /> </div>??? <div width="520" height="300" alt="分享除此而外一个jQuery的超酷幻灯插件：jQuery Chop Slider 2.0" /> </div>??? <div width="520" height="300" alt="分享除此而外一个jQuery的超酷幻灯插件：jQuery Chop Slider 2.0" /> </div>??? <div width="520" height="300" alt="分享除此而外一个jQuery的超酷幻灯插件：jQuery Chop Slider 2.0" /> </div>? </div>? <div class must be visible!?? !Reserved Class name. Required class! */.cs-activeSlide { display:block; }/* Container with caption's text. Must be hidden */.slide-descriptions {?? ?display:none;}/* Container with caption, must be hidden by default */.caption {?? ?background: url("../images/d-bg.png") repeat scroll 0 0 transparent;??? color: #FFFFFF;??? display: none;??? height: 280px;??? padding: 20px;??? position: absolute;??? right: 10px;??? top: 140px;??? width: 100px;??? z-index: 3;}.full-3D {?? ?right: 40px;??? top: 580px;??? width: 840px;?? ?height:20px;}/* Container with Pagination buttons */.pagination {?? ?bottom: 50px;??? left: 180px;??? margin-top: 50px;??? position: absolute;??? text-align: center;}.slider-pagination {?? ?display:inline-block;?? ?width:15px;?? ?height:10px;?? ?background:url(../images/navi.png) no-repeat left bottom;?? ?margin:0 10px;?? ?cursor:pointer;?? ?position:relative;?? ?z-index:200;}/* This is a required class for the "Active" pagination button. ! Reserved Class Name ! */.cs-active-pagination {?? ?background:url(../images/navi.png) no-repeat left top;}/* Multiple SLiders */.slider-2 {?? ?padding-top:0;?? ?margin-top:20px;}#slider-1, #slider-2 {?? ?width:520px;?? ?height:300px;?? ?margin-left:auto;?? ?margin-right:auto;?? ?position:relative;?? ?z-index:2;?? ?display:block;}.cs-activeSlide-2 {?? ?display:block}.cs-active-pagination-2 {?? ?background:url(../images/navi.png) no-repeat left top;}

Javacript代码

倒入相关类库，如下：

<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script><script type="text/javascript" src="scripts/jquery.id.chopslider-2.2.0.free.min.js"></script><script type="text/javascript" src="scripts/jquery.id.cstransitions-1.2.min.js"></script><script type="text/javascript" src="scripts/demo-2d.js"></script>

幻灯代码：

jQuery(function(){?? ?$("#slider").chopSlider({?? ??? ?/* Slide Element */?? ??? ?slide : ".slide",?? ??? ?/* Controlers */?? ??? ?nextTrigger : "a#slide-next",?? ??? ?prevTrigger : "a#slide-prev",?? ??? ?hideTriggers : true,?? ??? ?sliderPagination : ".slider-pagination",?? ??? ?/* Captions */?? ??? ?useCaptions : true,?? ??? ?everyCaptionIn : ".sl-descr",?? ??? ?showCaptionIn : ".caption",?? ??? ?captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",?? ??? ?/* Autoplay */?? ??? ?autoplay : true,?? ??? ?autoplayDelay : 6000,?? ??? ?/* Default Parameters */?? ??? ?defaultParameters : {?? ??? ??? ?type: "vertical",?? ??? ??? ?xOffset: 20,?? ??? ??? ?yOffset: 20,?? ??? ??? ?hPieces : 10,?? ??? ??? ?vPieces: 20,?? ??? ??? ?rotate : 10 ,?? ??? ??? ?rotateSymmetric: false,?? ??? ??? ?scaleX:0.5,?? ??? ??? ?scaleY:-0.5,?? ??? ??? ?translateX:10,?? ??? ??? ?translateY:10,?? ??? ??? ?ease1:"ease",?? ??? ??? ?ease2:"ease",?? ??? ??? ?origin:"center center",?? ??? ??? ?dur1: 1000,?? ??? ??? ?dur2 :600,?? ??? ??? ?dur3: 1000,?? ??? ??? ?pieceDelay : 50,?? ??? ??? ?xFadeDelay :0,?? ??? ??? ?prevTransition : ?? ?{?? ??? ??? ??? ?rotate:-10,?? ??? ??? ??? ?xOffset:10,?? ??? ??? ??? ?startFrom:10?? ??? ??? ?}?? ??? ?},?? ??? ?/* For Mobile Devices */?? ??? ?mobile: {?? ??? ??? ?disableCSS3:true,?? ??? ??? ?dur1:1200,?? ??? ??? ?dur2:1200,?? ??? ??? ?dur3:1200,?? ??? ??? ?hPieces:4,?? ??? ??? ?vPieces:4,?? ??? ??? ?pieceDelay:120,?? ??? ??? ?rotate:0,?? ??? ??? ?yOffset:0,?? ??? ??? ?scaleX:1,?? ??? ??? ?scaleY:1?? ??? ?},?? ??? ?/* For Old and IE Browsers */?? ??? ?noCSS3:{?? ??? ??? ?dur1:1200,?? ??? ??? ?dur2:1200,?? ??? ??? ?dur3:1200,?? ??? ??? ?hPieces:4,?? ??? ??? ?vPieces:4,?? ??? ??? ?pieceDelay:120,?? ??? ??? ?xFadeDelay :200?? ??? ?},?? ??? ?onStart: function(){ /* Do Something*/ },?? ??? ?onEnd: function(){ /* Do Something*/ }?? ?})})

代码书写完毕，希望大家喜欢这个插件！

?