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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 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下连接mssql2005的代码
2011/01/17 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
puppeteer库入门初探
2019/01/09 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
提升Python程序运行效率的6个方法
2015/03/31 Python
python3抓取中文网页的方法
2015/07/28 Python
机器学习python实战之决策树
2017/11/01 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
C++面试题:关于链表和指针
2013/06/05 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
视光学专业毕业生推荐信
2013/10/28 职场文书
大学生年度自我鉴定
2013/10/31 职场文书
教职工代表大会主持词
2014/04/01 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
工会工作个人总结
2015/03/03 职场文书
简爱电影观后感
2015/06/10 职场文书
公司晚会主持词
2019/04/17 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python