jQuery实现的3D版图片轮播示例【滑动轮播】

2019-11-19 12:15:50

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：js数组去重的方法总结

下一篇：highCharts提示框中显示当前时间的方法