溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
