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 Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 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的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
python的launcher用法知识点总结
2020/08/07 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
实习护士自荐信
2015/03/25 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
早恋主题班会
2015/08/14 职场文书
导游词之南京中山陵
2019/11/27 职场文书