本文實例講述了jQuery實現的3D版圖片輪播。分享給大家供大家參考，具體如下：
這個是用了3張圖，來回滑動，類似一個圓圈（不曉得這個 怎么上動圖啊！！！！）
圖就是這么個圖，但是他是可以滑動的（不好描述啊！！）
貼代碼比較方便。。。
<div class="banner"> <div class="banner_li left"> <img src="2.jpg" /> </div> <div class="banner_li active"> <img src="img/borderlands_tiny_tina.jpg" /> </div> <div class="banner_li right"> <img src="img/lang_yie_ar_kung_fu.jpg" /> </div></div>
布局就是這么個布局，自己找圖片替換一下吧
重點是css部分的css3的一些屬性，靈活運用transform和transition
*{ margin: 0; padding: 0;}.banner{ width: 100%; height: 3rem; position: relative; overflow: hidden; padding:.2rem; box-sizing: border-box; margin-top: 1rem; font-size: .1rem;}.banner .banner_li,.banner .banner_li img{ width: 100%; height: 2.58rem; transition: all 0.3s ease 0s;}.banner .banner_li{ position: absolute; left: 0; top: .21rem;} .left img{ transform: scale(.256,.88) translateX(-122%); } .active{ transform: scale(.352,1); z-index: 2; /*box-shadow: 0 0 .2rem red;*/ }.right img{ transform: scale(.256,.88) translateX(122%);}上面的 transform的放大倍數是經過計算了的，相當于自身的大小乘以這個倍數就是現在的大小，偏移量也是計算后的。
transition一定要寫上，有沒有3d的效果全看這個了。
js部分比較簡單了，要注意滑動開始、滑動過程以及滑動結束的公共變量的控制。貼代碼。。。
$(function() { var dis, startX, moveX, endX, current_index = 0, touchflag = true,num=0; $('.banner').on('touchstart', function(e) { startX = e.originalEvent.changedTouches[0].pageX; }); $('.banner').on('touchmove', function(e) { moveX = e.originalEvent.changedTouches[0].pageX; dis = moveX - startX; if(touchflag){ touchflag=false if(dis > 2) { console.log('上一張',current_index); if(current_index == 0) { current_index = $('.banner_li').length - 1; $('.banner .banner_li:eq(' + current_index + ')').removeClass('right').addClass('left').prev().removeClass('active').addClass('right'); $('.banner .banner_li:eq(' + current_index + ')').prev().prev().removeClass('left').addClass('active'); } else { current_index--; $('.banner .banner_li:eq(' + current_index + ')').removeClass('right').addClass('left'); $('.banner .banner_li:eq(' + current_index + ')').next().removeClass('left').addClass('active'); $('.banner .banner_li:eq(' + current_index + ')').next().next().removeClass('active').addClass('right') $('.banner .banner_li:eq(' + current_index + ')').prev().removeClass('active').addClass('right'); } } else if(dis < -2) { console.log('下一張') if(current_index==2){ current_index=0; $('.banner .banner_li:eq(' + current_index + ')').removeClass('active').addClass('left'); $('.banner .banner_li:eq(' + current_index + ')').next().removeClass('right').addClass('active'); $('.banner .banner_li:eq(' + current_index + ')').next().next().removeClass('left').addClass('right'); }else{ current_index++; $('.banner .banner_li:eq(' + current_index + ')').removeClass('active').addClass('left'); $('.banner .banner_li:eq(' + current_index + ')').next().removeClass('right').addClass('active'); $('.banner .banner_li:eq(' + current_index + ')').prev().removeClass('left').addClass('right'); $('.banner .banner_li:eq(' + current_index + ')').prev().prev().removeClass('right').addClass('active'); } } } }); $('.banner').on('touchend', function(e) { endX = e.originalEvent.changedTouches[0].pageX; touchflag=true console.log(num++,current_index) })});變量current_index是指永遠在最左邊的div的序號，給一個touch_flag是避免滑動出現混亂，滑動結束之后要還原這個變量，變量num沒啥用，就是我自己看看，endX也沒用。
要是需要更加精細的效果，你們自己調整吧，我好累啊。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
