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点赞功能实现代码 点个赞吧!
May 29 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery实现简单全选框
Sep 13 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下使用以下代码连接并测试
2008/04/09 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
JQuery 入门实例1
2009/06/25 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python实现图片批量剪切示例
2014/03/25 Python
python网络编程学习笔记(一)
2014/06/09 Python
Python基本语法经典教程
2016/03/11 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python之pymysql的使用小结
2019/07/01 Python
Python 下载及安装详细步骤
2019/11/04 Python
Python devel安装失败问题解决方案
2020/06/09 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
助残日活动总结
2014/08/27 职场文书
社区灵活就业证明
2014/11/03 职场文书
家属答谢词
2015/01/05 职场文书
皇城相府导游词
2015/02/06 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android