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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 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中设置时区方法小结
2012/06/03 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python中防止sql注入的方法详解
2017/02/25 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
python实现键盘控制鼠标移动
2020/11/27 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
文职个人求职信范文
2013/09/23 职场文书
写好自荐信的要点
2013/11/06 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
二年级小学生评语
2014/04/21 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技