jQuery實(shí)現(xiàn)的3D版圖片輪播示例【滑動(dòng)輪播】

發(fā)布時(shí)間：2020-10-09 12:30:05 來(lái)源：腳本之家閱讀：386 作者：impossible1994727 欄目：web開(kāi)發(fā)

本文實(shí)例講述了jQuery實(shí)現(xiàn)的3D版圖片輪播。分享給大家供大家參考，具體如下：

這個(gè)是用了3張圖，來(lái)回滑動(dòng)，類(lèi)似一個(gè)圓圈（不曉得這個(gè) 怎么上動(dòng)圖?。。。。。?/p>

圖就是這么個(gè)圖，但是他是可以滑動(dòng)的（不好描述?。。。?/p>

貼代碼比較方便。。。

<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>

布局就是這么個(gè)布局，自己找圖片替換一下吧

重點(diǎn)是css部分的css3的一些屬性，靈活運(yùn)用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的放大倍數(shù)是經(jīng)過(guò)計(jì)算了的，相當(dāng)于自身的大小乘以這個(gè)倍數(shù)就是現(xiàn)在的大小，偏移量也是計(jì)算后的。

transition一定要寫(xiě)上，有沒(méi)有3d的效果全看這個(gè)了。

js部分比較簡(jiǎn)單了，要注意滑動(dòng)開(kāi)始、滑動(dòng)過(guò)程以及滑動(dòng)結(jié)束的公共變量的控制。貼代碼。。。

$(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是指永遠(yuǎn)在最左邊的div的序號(hào)，給一個(gè)touch_flag是避免滑動(dòng)出現(xiàn)混亂，滑動(dòng)結(jié)束之后要還原這個(gè)變量，變量num沒(méi)啥用，就是我自己看看，endX也沒(méi)用。

要是需要更加精細(xì)的效果，你們自己調(diào)整吧，我好累啊。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

jQuery實(shí)現(xiàn)的3D版圖片輪播示例【滑動(dòng)輪播】

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽