标签：
分享通过js实现多种图片切换特效，这里只有手动切换哦，自动效果需自写，效果地址：http://dwz.cn/1drD5u。
下载地址：http://www.w2bc.com/download/index/52209
适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/> <style type="text/css"> body,div{margin:0;padding:0;} html,body{height:100%;} body{background:#379EB6;} #wrap{min-height:100%;_height:100%;min-width:320px;overflow:hidden;} #imgs{position:relative;width:320px;height:568px;margin:0 auto;overflow:hidden;border-radius:15px;top:50px;z-index:1;background:url(images/loading.gif) no-repeat center center;} #imgs.visible{overflow:visible;} #imgs div{overflow:hidden;} #imgs img{width:100%;height:100%;display:block;} #tssel{position:absolute;top:650px;left:50%;z-index:10;width:160px;margin-left:-80px;} #navs{z-index:10;position:absolute;left:50%;top:225px;margin-left:180px;width:4px;} #navs a{overflow:hidden;display:block;width:2px;height:20px;border:1px solid #fff;margin:0 0 4px;transition:background 600ms ease;} #navs .active{background:#fff;} @media (max-width:540px) { body{overflow:hidden;} #navs{left:auto;right:10px;top:50%;margin-top:-117px;} #imgs{position:absolute;top:0;width:100%;height:100%;margin:0;border-radius:0;} #imgs img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);min-height:100%;height:auto;} #tssel{top:auto;bottom:10px;} } </style> </head> <body> <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> <script type="text/javascript" src="js/pageSwitch.js"></script> <script> var reg=location.search.match(/ts=([^&]*)/), ts=reg&®[1]||‘flipClock‘, a=new pageSwitch(‘imgs‘,{ duration:1000, start:0, direction:1, loop:true, ease:/flip(?!Paper)/.test(ts)?‘bounce‘:‘ease‘, transition:ts, mouse:true, mousewheel:true, arrowkey:true }), navs=document.getElementById(‘navs‘).getElementsByTagName(‘a‘); a.on(‘before‘,function(m,n){ navs[m].className=‘‘; navs[n].className=‘active‘; }); if(/^(?:scroll3d|flip)/.test(ts)){ document.getElementById(‘imgs‘).className=‘visible‘; } document.getElementById(‘tssel‘).onchange=function(){ location.href=‘?ts=‘+this.value; } var options=document.getElementById(‘tssel‘).options, i=0,op; while(op=options[i++]){ if(op.value===ts){ op.selected=true; break; } } i=0; for(;i<navs.length;i++){ !function(i){ navs[i].onclick=function(){ a.slide(i); } }(i); } </script> <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/sinea17/p/4693881.html
