html5页面3d滚动轮播,jQuery实现的3D版图片轮播示例【滑动轮播】
本文实例讲述了jQuery实现的3D版图片轮播。分享给大家供大家参考,具体如下:
这个是用了3张图,来回滑动,类似一个圆圈(不晓得这个 怎么上动图啊!!!!)
图就是这么个图,但是他是可以滑动的(不好描述啊!!)
贴代码比较方便。。。
布局就是这么个布局,自己找图片替换一下吧
重点是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程序设计有所帮助。
html5页面3d滚动轮播,jQuery实现的3D版图片轮播示例【滑动轮播】相关推荐
- html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效
本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,misl ...
- html 人物介绍 轮播,jQuery卡通人物介绍卡牌轮播切换代码
特效描述:jQuery 卡通人物介绍 卡牌轮播切换.jQuery卡通人物介绍卡牌轮播切换代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Level 4 The Barbarian ...
- html 轮播图_JS拖拽专题(二)——「实战」滑动轮播图的那点事儿
欢迎来到我的JS拖拽专题系列文章,更多精彩内容持续更新中,欢迎关注 :) 上一章节我们说到了在js中拖拽的基本原理,即我们在鼠标按下的时候计算出鼠标位置和物理的位置的差值,这个差值在移动的过程中不恒定 ...
- html的3d旋转木马插件,jRCarousel | jQuery响应式3D旋转木马插件
jR3DCarousel是一款效果非常炫酷的3D旋转木马jQuery插件.该旋转木马插件可以通过参数设置来修改旋转木马的类型,可以设置显示模式和easing动画缓动模式等.它的特点还有: 多种动画效果 ...
- html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法 在页面中引入jqu ...
- html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单 在同一个 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十二) —— jQuery Mobile 页面事件与 deferred
在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery ...
- HTML5七夕情人节表白网页_飘落蒲公英动画超酷炫的HTML5页面_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册
HTML5七夕情人节表白网页❤飘落蒲公英动画超酷炫的HTML5页面❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 ...
- html5立体照片墙效果,HTML5特效可以 14种jQuery超酷3D网格照片墙动画特效源码
效果图 各位长友大家好, 今天 给大家带来的是14种jQuery超酷3D网格照片墙动画特效源码! 大家可以按照自己的意愿做成 个人喜欢的样子! 想要文件版源码的,请加穷581549454 废话不多说. ...
最新文章
- 自动化测试测试工具 AirTest 的使用方法与简介
- 将一个3 * 4的二维数组转换为4 * 3的二维数组
- 数据院跨学科交叉人才培养走出国门——中德交换生项目首位社科学子赴德国哥廷根大学交流学习
- 还应该如何实现“模板化函数指针”?
- python新手教程 从零开始-让你从零开始学会写爬虫的5个教程(Python)
- Arduino学习笔记24
- 开源性能测试工具 - Apache ab 介绍
- Java中加载properties文件的6种方法
- 【luogu】P1772物流运输(最短路+DP)
- 顺序不能改变的算子,是否跟时间有关
- 罗技g502 g102游戏驱动ghub详细 教程
- c51单片机跑马灯汇编语言,单片机的跑马灯简单汇编程序
- firefox 53支持java_火狐浏览器53.0版
- mac系统 查找英文目录
- 手把手教你Windows操作系统添加Virtio驱动
- 系统安全漏洞扫描绝佳助手之Nmap详解(转)
- 2016第1篇--Python查看微信被删好友
- 8.10 shell特殊符号cut命令 8.11 sort_wc_uniq命令 8.12 tee_tr_split命令 8.13 shell特殊符号下...
- 【牛客】幸运数字II题解
- 汇编文件大写.S后缀和小写.s后缀的区别