jQuery实现的3D版照片轮播[滑动轮播]

本文给出了一个用jQuery实现的三维照片轮播的例子。分享给大家参考，如下：

这一张用了三张图片，前后滑动，类似一个圆圈(我不知道怎么把这张图片上移！)

一张图片就是这样的图片，但是可以滑动(很难形容！)

粘贴代码很方便。

div class=' banner ' div class=' banner _ Li left ' img src=' http :2 . jpg '/div class=' banner _ Li active ' img src=' http : img/Borderlands _ tiny _ Tina . jpg '/div class=' banner _ liright ' img src=' http : img/lang _ YIE _ ar _ kung _ fu . jpg '/div/div布局就是这样的布局，所以自己找张图片来替换吧

重点放在css中css3的一些属性，灵活使用转换和转移

* { margin : 0；padd : 0；}.横幅{ width : 100%；height: 3rem相对位置：飞越：隐藏；padding:2rem盒子尺寸：边框盒子；margin-top : 1 rem；font-size : 1 rem；}.班纳。banner_li，班纳。banner _ Li img { width : 100%；高度： 2.58雷姆；transition:全0.3s易0；}.班纳。banner _ Li { position : absolute；left : 0；top : 21 rem；} .左img{ transform:比例尺(. 256， 88)translateX(-122%)；} .有源{ transform:标度(. 352，1)；z-index : 2；/* box-shadow : 0 . 2 rem红色；*/}.右img{ transform:比例尺(. 256， 88)translateX(122%)；}计算上述变换的放大倍数，相当于自身大小乘以这个倍数，即为当前大小，同时计算偏移量。

必须写过渡。是否有3d效果就看这个了。

Js比较简单，要注意滑动开始、滑动过程、滑动结束的常用变量的控制。粘贴代码。

$(function() { var dis，startX，moveX，endX，current_index=0，touchflag=true，num=0；$('.横幅')。on('touchstart '，函数{ startX=e . originalevent。changed touch[0 ].pageX })；$('.横幅')。on('touchmove '，函数{ moveX=e . originalevent。changed touch[0 ].page xdis=moveX-startX；if(触摸标志){ touch flag=false if(dis 2){ console。日志('上一张，current _ index)；if(current _ index==0){ current _ index=$(').banner _ Li’).长度-1;$('.班纳banner _ Li : eq(' current _ index ').removeClass(“”右')。addClass(')左')。prev().removeClass("活动")。addClass(')右');$('.班纳banner _ Li : eq(' current _ index ').prev().prev().removeClass(“”左')。添加CLaSS(' active ')；} else { current _ index-；$('.班纳banner _ Li : eq(' current _ index ').removeClass(“”右')。添加CLaSS(' left ')；$('.班纳banner _ Li : eq(' current _ index ').下一个()。removeClass(“”左')。添加CLaSS(' active ')；$('.班纳banner _ Li : eq(' current _ index ').下一个()。下一个()。removeClass("活动")。addClass(')右')$(')。班纳banner _ Li : eq(' current _ index ').prev().removeClass("活动")。addClass(')右');} } else if(dis -2) { console.log('下一张)if(current _ index==2){ current _ index=0；$('.班纳banner _ Li : eq(' current _ index ').removeClass("活动")。添加CLaSS(' left ')；$('.班纳banner _ Li : eq(' current _ index ').下一个()。removeClass(“”右')。添加CLaSS(' active ')；$('.班纳banner _ Li : eq(' current _ index ').下一个()。下一个()。removeClass(“”左')。addClass(')右');} else { current _ index$(')。班纳banner _ Li : eq(' current _ index ').removeClass("活动")。添加CLaSS(' left ')；$('.班纳banner _ Li : eq(' current _ index ').下一个()。removeClass(“”右')。添加CLaSS(' active ')；$('.班纳banner _ Li : eq(' current _ index ').prev().removeClass(“”左')。addClass(')右');$('.班纳banner _ Li : eq(' current _ index ').prev().prev().removeClass(“”右')。添加CLaSS(' active ')；} } } });$('.横幅')。on('touchend '，函数{ ENDx=e . originalevent。changed touch[0 ].page xtouchflag=true console . log(num，current _ index)})})；变量当前索引是指永远在最左边的差异的序号，给一个触摸标志是避免滑动出现混乱，滑动结束之后要还原这个变量，变量数字没啥用，就是我自己看看，endX也没用。

要是需要更加精细的效果，你们自己调整吧，我好累啊。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery图片操作技巧大全》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。