pageSwitch插件实现100种不同图片切换效果,此插件适应于全屏切换场景,并且实现了一百种切换效果,支持自定义切换页动画。效果如下图所示:

实现的代码。
html代码:
<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>










