天猫首页迷思之-jquery实现左侧广告牌图片轮播
本次要实现的是天猫首页每个楼层左侧的图片轮播效果。见图:
功能点有:点击右箭头向右滑动;点击左箭头向左滑动;什么都不点自动滑动。
1.实现样式。
简单分析一下大概的html结构。一个大的div里面包含两个箭头以及轮播的容器。图片是由三个p标签组成,每个p标签中包含3个图片。
css见github
<div class="floor-show-middle">
<a class="floor-show-middle-arrow arrow-left" title="上一个幻灯片"></a>
<a class="floor-show-middle-arrow arrow-right" title="下一个幻灯片"></a>
<div class="brand-slide-content">
<div class="brand-slide-bg" is-animating="false">
<p class="pt-page page-current">
<a href=""><img src="data:images/1-1.jpg"></a>
<a href=""><img src="data:images/1-2.jpg"></a>
<a href=""><img src="data:images/1-3.jpg"></a>
</p>
<p class="pt-page">
<a href=""><img src="data:images/2-1.jpg"></a>
<a href=""><img src="data:images/2-2.jpg"></a>
<a href=""><img src="data:images/2-3.jpg"></a>
</p>
<p class="pt-page">
<a href=""><img src="data:images/3-1.jpg"></a>
<a href=""><img src="data:images/3-2.jpg"></a>
<a href=""><img src="data:images/3-3.jpg"></a>
</p>
</div>
</div>
</div>
得到的效果是:
2. 图片轮播动画效果的实现。
为了方便描述,给三个需要展示的p编个号:①②③。
轮播的难点1:图片没法成圆圈式排列,怎么才能让处于边界的p①在向右滑动的时候左边有个③在向右滑动,and 怎么让处于边界的p③在向左滑动的时候右边有个①在向右滑动。
轮播的难点2:由于无法控制用户点击箭头的速度,如果前一个图片移动没完成就进行下一个图片移动,会造成混乱。解决办法很简单,为每个div增加一个属性is_animating,当动画开始设置为true,监听动画结束事件,结束后设置为false;每次在执行动画之前都需要判断这个变量。
如果三个p标签按照从左至右依次不叠加排列①②③,需要做到滑动效果的话②是很好实现,而①在从左至右滑动时因为左边没有元素了,所以无法循环滑动,同理③也是。好了,想办法。
方法一:p标签从左至右排列,头尾添加副本法。为了保证每张图片都有顺滑的从左至右滑动的动画效果,可以在在头部前面加上p③,在尾部加上p①;最后p标签的排列效果就是③①②③①;举个例子:
1.将div.brand-slide-bg中的样式设置为position:absolute;这样就可以使用left,right属性来让该div移动;
2.当第一个①在可视区域内时,点击左箭头 -> div向左移动1个单位 -> 移动完成后,将div的left的值改为-300px,让第二个③迅速处于可视区域
实现方法一:使用jquery中,animate方法移动(未添加动画原子性判断,刚开始写复用性还不太好,可以参考下思想):
function autoMove(){
var p_length=100;//p元素的宽度
var slide_div=$(".brand-slide-bg");//class为brand-slide-bg的div
var pic_index=slide_div.attr("index");//当前图片的索引
var p_quantities=slide_div.children("p").length;
slide_div.clearQueue();
if (pic_index==1) {
pic_index=p_quantities;
var last_p=slide_div.children("p").last();
slide_div.css("left","-100px");
slide_div.children("p").first().before(last_p.clone()); slide_div.animate({
left:0
},700,
function(){
//回调函数,删除添加的p
slide_div.children("p").first().remove();//删除为了滑动而添加的元素
var left=getLeft(p_length,pic_index);
slide_div.css("left",left);
});
}else{
pic_index--;
var left=getLeft(p_length,pic_index);//相对于父容器向左移动的值
slide_div.animate({
left:left
},800);
}
slide_div.attr("index",pic_index);
autoTask=setTimeout("autoMove()",2000);
}
自动轮播处理函数animate()
实现方法二:使用css3的属性transition来移动:
CSS3特性:transition+transform
以下是一个点击右边箭头的幻灯片向右翻动的代码,通过监听webkitTransitionEnd方法监听transition的结束时间,结束的时候快速将幻灯片的位置换到-100px的初始位置。
$(".arrow-right").click(function(){
var slide_div=$(this).siblings(".brand-slide-content").children(".brand-slide-bg");//滑动幻灯片的父div
var index=slide_div.attr("index");//当前图片的索引,默认为1
index++;
var position=index*(-100)+"px";
if(index==2){
slide_div.css("-webkit-transform-origin","-100px 0 0");
}
slide_div.css("-webkit-transition-duration","0.5s");
slide_div.css("-webkit-transform","translate3d("+position+",0,0)");
slide_div.attr("index",index);
});
/*小的滑动的幻灯片end*/ $(".brand-slide-bg").bind('webkitTransitionEnd', function(){
index=$(this).attr("index");//监听动画完成的动作
if(index==4){
index=1;
$(this).css("-webkit-transition-duration","0s");
$(this).css("-webkit-transform","translate3d(-100px,0,0)");
$(this).attr("index",index);
}
});
transition右箭头处理函数
方法二:p标签叠加排列,为每个p添加每个滑动方向的动画事件。
这种方式不需要新增p的副本,只有需要展示的p显示,其余都隐藏。
这次用css3的新特性,@ keyframes来实现。通过 @keyframes 规则,能够创建动画。配合css属性animation来使用。
css样式定义:
由于要支持不同浏览器,@-moz-keyframes在火狐中被解释,@-webkit-keyframes在chrome等webkit为核心的浏览器中被解释。
keyframe中需要定义from和to两个key的值,表示动画开始时元素的样式和动画结束时元素的样式。from,to也可以用百分比来代替,更精确
animate属性定义使用哪个动画、动画时常、动画执行次数。
设计上,为每个p元素在不同场景下划分不同css类,定义不同的动画。
.moveToLeft表示从当前位置向左移动。.moveFromLeft表示从左移动到指定位置。依次类推。
在定义一个类.page_current将该元素不隐藏展示
举个例子:p有①②③三个,默认都是隐藏状态。当前可视的只有②,点击左箭头。给p赋值的场景如下:②新增.moveToLeft,③新增moveFromRight,动画完成后,②去掉.moveToLeft;③去掉moveFroRight,③加上.page_current类
.moveFromRight{
animation:moveFromRight 0.5s ease 1;
-moz-animation:moveFromRight 0.5s ease 1; /* Firefox */
-webkit-animation:moveFromRight 0.5s ease 1; /* Safari and Chrome */
-o-animation:moveFromRight 0.5s ease 1; /* Opera */
}
.moveToLeft{
animation:moveToLeft 0.5s ease 1;
-moz-animation:moveToLeft 0.5s ease 1; /* Firefox */
-webkit-animation:moveToLeft 0.0.5s ease 1; /* Safari and Chrome */
-o-animation:moveToLeft 0.5s ease 1; /* Opera */
}
.moveFromLeft{
animation:moveFromLeft 0.5s ease 1;
-moz-animation:moveFromLeft 0.5s ease 1; /* Firefox */
-webkit-animation:moveFromLeft 0.5s ease 1; /* Safari and Chrome */
-o-animation:moveFromLeft 0.5s ease 1; /* Opera */
}
.moveToRight{
animation:moveToRight 0.5s ease 1;
-moz-animation:moveToRight 0.5s ease 1; /* Firefox */
-webkit-animation:moveToRight 0.5s ease 1; /* Safari and Chrome */
-o-animation:moveToRight 0.5s ease 1; /* Opera */
} @-webkit-keyframes moveToLeft {
to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveToLeft {
to { -moz-transform: translateX(-100%); }
}
@keyframes moveToLeft {
to { transform: translateX(-100%); }
}
@-webkit-keyframes moveFromLeft {
from { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveFromLeft {
from { -moz-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
from { transform: translateX(-100%); }
} @-webkit-keyframes moveToRight {
to { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveToRight {
to { -moz-transform: translateX(100%); }
}
@keyframes moveToRight {
to { transform: translateX(100%); }
} @-webkit-keyframes moveFromRight {
from { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveFromRight {
from { -moz-transform: translateX(100%); }
}
@keyframes moveFromRight {
from { transform: translateX(100%); }
}
keyframes样式定义
$(document).ready(function(){
$(".brand-slide-bg").children("p").bind('webkitAnimationStart', function() {
$(this).parent(".brand-slide-bg").attr("is-animating",true);
});
$(".brand-slide-bg").children("p").bind('webkitAnimationEnd', function() {
if($(this).hasClass("moveToLeft")){
$(this).removeClass("page-current");
$(this).removeClass("moveToLeft");
}
if($(this).hasClass("moveToRight")){
$(this).removeClass("page-current");
$(this).removeClass("moveToRight");
}
if($(this).hasClass("moveFromRight")){
$(this).addClass("page-current");
$(this).removeClass("moveFromRight");
}
if($(this).hasClass("moveFromLeft")){
$(this).addClass("page-current");
$(this).removeClass("moveFromLeft");
}
$(this).parent(".brand-slide-bg").attr("is-animating",false);
});
$(".arrow-right").click(function() {
slide_div=$(this).siblings(".brand-slide-content").children(".brand-slide-bg");
moveLittlePage(slide_div,"right","moveFromLeft","moveToRight");
});
$(".arrow-left").click(function() {
slide_div=$(this).siblings(".brand-slide-content").children(".brand-slide-bg");
moveLittlePage(slide_div,"left","moveFromRight","moveToLeft");
});
page_auto_move();
}); function page_auto_move(){
$(".brand-slide-bg").each(function(){
moveLittlePage($(this),"right","moveFromLeft","moveToRight");
});
setTimeout("page_auto_move()",2000);
}
function moveLittlePage(slide_div,way,from_css,to_css){
if(slide_div.attr("is-animating")=="true"){return;}//动画未结束不能开始
var current_css="page-current";
var current_p=slide_div.children(".page-current");
current_p.addClass(to_css);
if(way=="left"){
if (current_p.next().length<=0) {
slide_div.children().first().addClass(from_css);
slide_div.children().first().addClass(current_css);
}else{
current_p.next().addClass(from_css);
current_p.next().addClass(current_css);
}
}else if(way=="right"){
if (current_p.prev().length<=0) {
slide_div.children().last().addClass(from_css);
slide_div.children().last().addClass(current_css);
}else{
current_p.prev().addClass(from_css);
current_p.prev().addClass(current_css);
}
}
}
keyframes完整版js方法
最终我采用了css3得keyframes方法,源代码传送门:https://github.com/HappyBangs/bang_plugins/tree/master/plugin-p-slide
天猫首页迷思之-jquery实现左侧广告牌图片轮播的更多相关文章
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...
- 使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
- 天猫首页迷思之-jquery实现整个div的懒加载(1)
懒加载是众所周知的减少网页负载,提高性能的方法,不少大型用图片用的多的网站都用到了. 于是我网上一搜,得到一插件:jquery.lazyload 网址:http://www.appelsiini ...
- 天猫首页迷思之-jquery实现整个div的懒加载(2)-插件面向对象化-闭包和原型的实例
前文有简单的实现了一个制作懒加载的方法,但其实以方法的形式做插件扩展性不强.那么本文就来用面向对象的方法将其制作成一个真正的插件: 我想要的最终的调用效果是: $(".loading&quo ...
- (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播
ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...
- jQuery插件slider实现图片轮播
1:引入相应的js文件 jquery.SuperSilder.js 2:HTML: 结构 注:此地加载图片的代码也可以从后台库中读取图片的集合列表,然后通过循环的方式显示出来 3:CSS 样式定义左 ...
- 基于jquery的图片轮播 (IE8以上)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Jquery图片轮播和CSS图片轮播
学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
随机推荐
- java中继承的概念
继承是类的三大特性之一,是java中实现代码重用的重要手段之一. java中只支持单继承,即每个类只能有一个父类. 继承表达的是is a的关系,或者说一种特殊和一般的关系. ...
- [译]8-spring bean的作用域
在spring中使用<bean/>标签定义bean的时候,可以使用scope属性来定义bean的作用域.如果想要每次 从spring容器得到一个新创建的bean实例,可以指定scope=& ...
- 云效(阿里云)流水线 + nginx + uWsgi + flask + python3 基础环境搭建 --备忘
一.开发环境搭建 1.安装python3 yum -y groupinstall "Development tools" yum -y install zlib-devel bzi ...
- Python-有名匿名函数、列表推导式
介绍: 匿名函数: 匿名函数用lambda关键词能创建小型匿名函数.这种函数得名于省略了用def声明函数的标准步骤,节省开辟空间. 列表推导式: 有名函数 #1.有名函数(初始) def squ ...
- Java分布式数据导出实践
伴随业务发展日益剧增,对数据的要求越来越多也越来越高. 用户在浏览器发起导出请求--web服务器接收请求--请求后台获取数据--数据统计后生成excel或其他图标--响应给客户端 整个过程至少5步,才 ...
- 【bzoj4154】[Ipsc2015]Generating Synergy KD-tree
题目描述 给定一棵以1为根的有根树,初始所有节点颜色为1,每次将距离节点a不超过l的a的子节点染成c,或询问点a的颜色 输入 第一行一个数T,表示数据组数 接下来每组数据的第一行三个数n,c,q表示结 ...
- 【bzoj3668】[Noi2014]起床困难综合症 贪心
原文地址:http://www.cnblogs.com/GXZlegend/p/6797090.html 题目描述 21 世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神 ...
- windows安装 Nodejs,NPM, CNPM
1, dowload Nodejs from : http://nodejs.cn/download/ 下载完毕后,可以安装node,建议不要安装在系统盘(本例安装在 D:\vueProject) ...
- [洛谷P3701]「伪模板」主席树
题目大意:太暴力了,就不写了,看这儿 题解:对于每个$byx$的人,从源点向人连边,容量为此人的寿命. 对于每个手气君的人,从人向汇点连边,容量为此人的寿命. 对于每个$byx$的人与手气君的人,如果 ...
- 大型C++项目必须注意的几个小问题
大型C++项目必须注意的几个小问题 有些问题对于小型的C++项目来说可能无关紧要,但对于大中型C++项目来讲,这些问题却成了大问题.什么样的项目算是小型项目呢,什么样的算是大中型项目呢,我认为10万L ...