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实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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中die(),exit(),return的区别
2013/06/20 PHP
Javascript对象属性方法汇总
2013/11/21 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
总结Python编程中三条常用的技巧
2015/05/11 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
详解Python自建logging模块
2018/01/29 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python连接mongodb集群方法详解
2020/02/13 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
10个顶级Python实用库推荐
2021/03/04 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
商务助理岗位职责
2013/11/13 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Redis实现一个账号只能登录一个设备
2022/04/19 Redis