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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
基于jquery实现五星好评
Nov 18 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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读取javascript设置的cookies的代码
2010/04/12 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
vue中activated的用法
2021/01/03 Vue.js
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python实现数据写入excel表格
2018/03/25 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
利用python求积分的实例
2019/07/03 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
服务生自我鉴定
2014/01/22 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
Java中的继承、多态以及封装
2022/04/11 Java/Android
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers