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常用选择器详解
Jul 17 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
function.inc.php超越php
2006/12/09 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
让python json encode datetime类型
2010/12/28 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python教程之全局变量用法
2016/06/27 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
教师自荐信
2013/12/10 职场文书
中层干部培训方案
2014/06/16 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
优秀护士事迹材料
2014/12/25 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript