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


Posted in jQuery onJanuary 18, 2019

本文实例讲述了jQuery实现的3D版图片轮播。分享给大家供大家参考,具体如下:

这个是用了3张图,来回滑动,类似一个圆圈(不晓得这个 怎么上动图啊!!!!)

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

图就是这么个图,但是他是可以滑动的(不好描述啊!!)

贴代码比较方便。。。

<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实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
jquery的$().each和$.each的区别
Jan 18 #jQuery
jquery层次选择器的介绍
Jan 18 #jQuery
jQuery无冲突模式详解
Jan 17 #jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 #jQuery
Jquery获取radio选中值实例总结
Jan 17 #jQuery
jquery获取img的src值实例介绍
Jan 16 #jQuery
You might like
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
jQuery技巧总结
2011/01/01 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
2015年元旦文艺汇演主持词
2014/03/26 职场文书
高中生操行评语
2014/04/25 职场文书
《日月潭》教学反思
2016/02/20 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android