首页 / 脚本样式 / JavaScript / PageSwitch插件实现100种不同图片切换效果

<div id="wrap"><div id="imgs"><div><img src="images/1.jpg" /></div><div><img src="images/2.jpg" /></div><div><img src="images/3.jpg" /></div><div><img src="images/4.jpg" /></div><div><img src="images/5.jpg" /></div><div><img src="images/6.jpg" /></div><div><img src="images/7.jpg" /></div><div><img src="images/8.jpg" /></div><div><img src="images/9.png" /></div></div><div id="navs"><a href="javascript:;" class="active"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div><select id="tssel"><option value="">选择切页效果</option><option value="fade">fade</option><optgroup label="滚动效果"><option value="scroll">scroll</option><option value="scroll3d">scroll3d</option><option value="scrollCover">scrollCover</option><option value="scrollCoverReverse">scrollCoverReverse</option><option value="scrollCoverIn">scrollCoverIn</option><option value="scrollCoverOut">scrollCoverOut</option><option value="scrollX">scrollX</option><option value="scroll3dX">scroll3dX</option><option value="scrollCoverX">scrollCoverX</option><option value="scrollCoverReverseX">scrollCoverReverseX</option><option value="scrollCoverInX">scrollCoverInX</option><option value="scrollCoverOutX">scrollCoverOutX</option><option value="scrollY">scrollY</option><option value="scroll3dY">scroll3dY</option><option value="scrollCoverY">scrollCoverY</option><option value="scrollCoverReverseY">scrollCoverReverseY</option><option value="scrollCoverInY">scrollCoverInY</option><option value="scrollCoverOutY">scrollCoverOutY</option></optgroup><optgroup label="滑动效果"><option value="slide">slide</option><option value="slideCover">slideCover</option><option value="slideCoverReverse">slideCoverReverse</option><option value="slideCoverIn">slideCoverIn</option><option value="slideCoverOut">slideCoverOut</option><option value="slideX">slideX</option><option value="slideCoverX">slideCoverX</option><option value="slideCoverReverseX">slideCoverReverseX</option><option value="slideCoverInX">slideCoverInX</option><option value="slideCoverOutX">slideCoverOutX</option><option value="slideY">slideY</option><option value="slideCoverY">slideCoverY</option><option value="slideCoverReverseY">slideCoverReverseY</option><option value="slideCoverInY">slideCoverInY</option><option value="slideCoverOutY">slideCoverOutY</option></optgroup><optgroup label="裁切效果"><option value="slice">slice</option><option value="sliceX">sliceX</option><option value="sliceY">sliceY</option></optgroup><optgroup label="缩放效果"><option value="zoom">zoom</option><option value="zoomCover">zoomCover</option><option value="zoomCoverReverse">zoomCoverReverse</option><option value="zoomCoverIn">zoomCoverIn</option><option value="zoomCoverOut">zoomCoverOut</option><option value="zoomX">zoomX</option><option value="zoomCoverX">zoomCoverX</option><option value="zoomCoverReverseX">zoomCoverReverseX</option><option value="zoomCoverInX">zoomCoverInX</option><option value="zoomCoverOutX">zoomCoverOutX</option><option value="zoomY">zoomY</option><option value="zoomCoverY">zoomCoverY</option><option value="zoomCoverReverseY">zoomCoverReverseY</option><option value="zoomCoverInY">zoomCoverInY</option><option value="zoomCoverOutY">zoomCoverOutY</option></optgroup><optgroup label="扭曲效果"><option value="skew">skew</option><option value="skewCover">skewCover</option><option value="skewCoverReverse">skewCoverReverse</option><option value="skewCoverIn">skewCoverIn</option><option value="skewCoverOut">skewCoverOut</option><option value="skew">skewX</option><option value="skewCoverX">skewCoverX</option><option value="skewCoverReverseX">skewCoverReverseX</option><option value="skewCoverInX">skewCoverInX</option><option value="skewCoverOutX">skewCoverOutX</option><option value="skewY">skewY</option><option value="skewCoverY">skewCoverY</option><option value="skewCoverReverseY">skewCoverReverseY</option><option value="skewCoverInY">skewCoverInY</option><option value="skewCoverOutY">skewCoverOutY</option></optgroup><optgroup label="翻转效果"><option value="flip">flip</option><option value="flip3d">flip3d</option><option value="flipClock">flipClock</option><option value="flipPaper">flipPaper</option><option value="flipCover">flipCover</option><option value="flipCoverReverse">flipCoverReverse</option><option value="flipCoverIn">flipCoverIn</option><option value="flipCoverOut">flipCoverOut</option><option value="flipX">flipX</option><option value="flip3dX">flip3dX</option><option value="flipClockX">flipClockX</option><option value="flipPaperX">flipPaperX</option><option value="flipCoverX">flipCoverX</option><option value="flipCoverReverseX">flipCoverReverseX</option><option value="flipCoverInX">flipCoverInX</option><option value="flipCoverOutX">flipCoverOutX</option><option value="flipY">flipY</option><option value="flip3dY">flip3dY</option><option value="flipClockY">flipClockY</option><option value="flipPaperY">flipPaperY</option><option value="flipCoverY">flipCoverY</option><option value="flipCoverReverseY">flipCoverReverseY</option><option value="flipCoverInY">flipCoverInY</option><option value="flipCoverOutY">flipCoverOutY</option></optgroup><optgroup label="爆炸效果"><option value="bomb">bomb</option><option value="bombCover">bombCover</option><option value="bombCoverReverse">bombCoverReverse</option><option value="bombCoverIn">bombCoverIn</option><option value="bombCoverOut">bombCoverOut</option><option value="bombX">bombX</option><option value="bombCoverX">bombCoverX</option><option value="bombCoverReverseX">bombCoverReverseX</option><option value="bombCoverInX">bombCoverInX</option><option value="bombCoverOutX">bombCoverOutX</option><option value="bombY">bombY</option><option value="bombCoverY">bombCoverY</option><option value="bombCoverReverseY">bombCoverReverseY</option><option value="bombCoverInY">bombCoverInY</option><option value="bombCoverOutY">bombCoverOutY</option></optgroup></select></div>