前段时间我们介绍过一款jQuery的超酷幻灯效果插 件：。今天我们将给大家来带另外一个绝对震撼的jQuery实现的幻灯slider插件：。 这个插件拥有了192个不同的变化效果，绝对能够满足你不同的变换需要。而且支持很多2D和3D的特效。更重要的是它支持了非CSS3的效果，这样你可以 有足够的空间去开发一款所有浏览器都支持的幻灯效果。而且支持开发自定义的变化效果。这需要你自己开发。以下是主要特性：
- 122个2D变换效果：这里有105个效果支持所有的浏览器，除了IE，在IE中的效果可能略有不同。不过总体来说还是很酷的。
- 60个3D的变换效果：支持所有现代浏览器。支持：Chrome
- 5个非CSS3的换效果：非常适合不支持CSS3的变化效果浏览器，例如，IE6-9(微软应该努努力了！）
- 5个移动设备的变化效果：适合于移动设备上使用
这个插件提供如下版本：
- jQuery Chop slider(核心插件）
- Chop slider 2 wordpress插件
- 变换transitions类库
废话不说，我们现在开发一个基于Chop Slider的幻灯演示。
HTML标签
以上定义了幻灯的主题，包括导航，上一个幻灯，下一个幻灯及其幻灯页面的描述，还有定义了幻灯使用的图片。
CSS
@charset "utf-8"; body { background:#313131 repeat left top; font-family:Arial, Helvetica, sans-serif; margin:0; font-size:13px; line-height:1.5em; color:#333; min-width:1000px; position:relative; } p { margin:10px 0; } h1, h2, h3, h4, h5, h6 { margin:0 0 10px; } h5 { text-transform:uppercase; } img { border:none; } h2 { margin:15px 0; } ul li { margin:5px 0; } .wrapper { position:relative; margin-left:auto; margin-right:auto; width:520px; height:300px; display:block; padding-top:150px; padding-bottom:120px; background:url(../images/podium.png) no-repeat bottom; z-index:2; } .wrapper2 { position:relative; margin-left:auto; margin-right:auto; margin-top:20px; width:520px; height:300px; display:block; z-index:2; text-align:center; padding-bottom:50px; } .wrapper2 a { display:inline-block; padding:0px 5px; background:#fff; border:1px solid #ccc; border-radius:3px; text-decoration:none; margin:0px 5px; } .wrapper2 .active-transition { background:#222; color:#fff; } /*---------- Slider ----------- */ /*---------- Left and Right Triggers ----------- */ #slide-prev { position:absolute; width:21px; height:33px; bottom:39px; left:26px; z-index:4; background:url(../images/sl-control.png) left top no-repeat; } #slide-next { position:absolute; width:21px; height:33px; bottom:39px; right:26px; z-index:4; background:url(../images/sl-control.png) left bottom no-repeat; } /*---------- Shadow, just for styling ----------- */ .s-shadow-b{ background:url(../images/shadow.png) no-repeat top; /*width:876px;*/ width:520px; height:55px; position:absolute; left: 0px; bottom:60px; z-index:1; } /*---------- Main Slider Container----------- */ #slider { width:520px; height:300px; margin-left:auto; margin-right:auto; position:relative; z-index:2; display:block; } /* Every slide must be hidden by default */ .slide { display:none; } /* And only the slide with "cs-activeSlide" 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代码
倒入相关类库，如下：
幻灯代码：
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*/ } }) }) 代码书写完毕，希望大家喜欢这个插件！