自己写的carousel
可以
function appendRight() { //alert("right"); lastItem = itemsRight[urls.length - ]; firstItem = itemsRight[]; now = parseInt(($(lastItem).attr("id")).split("_")[]); $(".slidePics").prepend(itemsRight[urls.length - ]); moveRight(); itemsRight.unshift(firstItem); //新元素添加到数组开始 itemsRight.pop(); //移除最后一个元素 }
太奇怪了吧!!!!!!!!!!!!!!!!!
不可以
function appendRight() { //alert("right"); lastItem = itemsRight[urls.length - ]; firstItem = itemsRight[]; now = parseInt(($(lastItem).attr("id")).split("_")[]); $(".slidePics").prepend(lastItem); moveRight(); itemsRight.unshift(firstItem); //新元素添加到数组开始 itemsRight.pop(); //移除最后一个元素 }
完整的分步加载:
//起点值start
var start; $('.slidePics').on("touchstart", getStart, this);
$('.slidePics').on("touchmove", getDirection, this);
$('.slidePics').on("touchend", updateUrl, this); var urls = ["img/t4_01.jpg", "img/t4_02.jpg", "img/t4_03.jpg", "img/t4_04.jpg", "img/t4_05.jpg"];
var itemsLeft = [];
var itemsRight = [];
var left = false;
var firstItem = null;
var lastItem = null;
var now;
var switchLeft = false;
var switchRight = false;
var touched = false; if (urls.length > ) {
for (var i = ; i <= urls.length; i++) {
var itemleft = '<div class="event_one animate" style="left:800px;" id="event_' + i + '">' +
'<div class="imgInfo">' + i + '/' + urls.length + '</div>' +
'<div class="mediaSelf">' +
'<img src="' + urls[i - ] + '">' +
'</div>' +
'</div>' +
'</div>';
var itemright = '<div class="event_one animate" style="left:-800px;" id="event_' + i + '">' +
'<div class="imgInfo">' + i + '/' + urls.length + '</div>' +
'<div class="mediaSelf">' +
'<img src="' + urls[i - ] + '">' +
'</div>' +
'</div>' +
'</div>';
itemsLeft.push(itemleft);
itemsRight.push(itemright);
} } function getStart(e) {
start = parseInt(e.targetTouches[].pageX);
} function getDirection(e) {
var move = parseInt(e.targetTouches[].pageX);
if (start < move) {
left = false;
} else if (start > move) {
left = true;
}
} function updateUrl() {
if (!touched) {
touched = true;
//这个不能一起隐藏,会使初始化的3个div也被取消动画
//$(".event_one").removeClass("animate");
if ($('.event_one').length < urls.length) {
if (left) {
appendLeft();
} else {
appendRight();
}
} else {
//alert("finished");
if (left) {
moveLeft();
} else {
moveRight();
}
}
}
} function appendLeft() {
//alert("left");
lastItem = itemsLeft[urls.length - ];
firstItem = itemsLeft[]; if (!switchRight) {
now = parseInt(($(firstItem).attr("id")).split("_")[]);
$(".slidePics").append(itemsLeft[]);
switchLeft = true;
} else {
$(".slidePics").append(itemsRight[]);
switchLeft = false;
} //动作在append计数之前
moveLeft(); itemsLeft.shift(); //移除最前一个元素
itemsLeft.push(lastItem); //新元素添加到数组结尾 } function appendRight() { lastItem = itemsRight[urls.length - ];
firstItem = itemsRight[];
if (!switchLeft) {
now = parseInt(($(lastItem).attr("id")).split("_")[]);
$(".slidePics").prepend(itemsRight[urls.length - ]); switchRight = true;
} else { $(".slidePics").prepend(itemsLeft[urls.length - ]);
switchRight = false;
} //动作在append计数之前
moveRight(); itemsRight.unshift(firstItem); //新元素添加到数组开始
itemsRight.pop(); //移除最后一个元素 } function moveLeft() {
var next = now > urls.length - ? : now + ;
var pre = now <= ? urls.length : now - ; console.log("pre", pre, "now", now, "next", next, switchRight, "touched", touched); //准备下一张
$("#event_" + next).addClass("animate");
$("#event_" + next).css("left", "800px"); //移入
//$("#event_"+now).css("left","800px");
$("#event_" + now).addClass("animate");
$("#event_" + now).css("left", "0px"); //移出正常
//$("#event_" + pre).addClass("animate");
$("#event_" + pre).css("left", "-800px");
//经测试,以下两句即可避免使用全部remove
$("#event_" + (pre - )).removeClass("animate");
$("#event_" + (next + )).removeClass("animate"); touched = false;
now++;
if (now > urls.length) {
now = ;
}
} function moveRight() {
var pre = now > urls.length - ? : now + ;
var next = now <= ? urls.length : now - ;
console.log("pre", pre, "now", now, "next", next, switchLeft, "touched", touched); //准备下一张
$("#event_" + next).addClass("animate");
$("#event_" + next).css("left", "-800px"); //移入
//$("#event_"+now).css("left","-800px");
$("#event_" + now).addClass("animate");
$("#event_" + now).css("left", "0px"); //移出正常
//$("#event_" + pre).addClass("animate");
$("#event_" + pre).css("left", "800px");
//经测试,以下两句即可避免使用全部remove
$("#event_" + (pre + )).removeClass("animate");
$("#event_" + (next - )).removeClass("animate"); touched = false;
now--;
if (now < ) {
now = urls.length;
}
}
本地分步carousel
双向切换的时候有一步延迟,连续点击还没有很有效的屏蔽。
就是由于上面那个奇怪的不同,搞了很多天。
苦逼的没有animate()方法,硬生生的用css3:
html一开始就加载3张图片:
<div class="slidePics">
<div class="event_one event_5 animate" style="left:-800px;" data-id="event_5">
<div class="imgInfo">/</div>
<div class="mediaSelf">
<div style="background-image:url(img/t4_05.jpg)"></div>
</div>
</div>
<div class="event_one event_1 animate" data-id="event_1">
<div class="imgInfo">/</div>
<div class="mediaSelf">
<div style="background-image:url(img/t4_01.jpg)"></div>
</div>
</div>
<div class="event_one event_2 animate" style="left:800px;" data-id="event_2">
<div class="imgInfo">/</div>
<div class="mediaSelf">
<div style="background-image:url(img/t4_02.jpg)"></div>
</div>
</div>
</div>
<div class="slideBack">
<div></div>
</div>
初始模板
下面那个back独立在外面absolute,index较高,用来接受返回按钮的事件。
.event_one{
position: absolute;
left: ;
width: 800px;
height: 480px;
display: none;
}
.animate{
display: block;
-webkit-transition: .7s ease-out all;
}
图片的居中问题用img tag或者背景做分别是:
.mediaSelf div{
width: 800px;
height: 394px;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.mediaSelf img{
position: relative;
height: %;
width: auto;
margin: auto;
}
如果用img tag,需要js把图片等比例缩放以后,除以二居中。
css的比较简单,background-size: contain;但也做不到垂直居中,只是把图片完整显示出来。
自己写的carousel的更多相关文章
- Bootsrap 的 Carousel
一.简介 Carousel 就是指轮播图,这里 有完整的代码例子.它可以很简单的就构造出来,结构如下: div.carousel.slide[data-ride="carousel" ...
- jQuery轮播图(二)利用构造函数和原型创建对象以实现继承
本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...
- Sultana后记:纯css也能写col,select,datepicker,carousel...
未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...
- Bootstrap之Carousel不能自动播放的解决办法(转)
Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...
- 利用bootstrap写图片轮播
利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...
- 玉渊潭赏樱花有感:从无到有写一个jQuery开源插件
“玉渊潭公园樱花节”是每年樱花绽放时,都会在玉渊潭公园樱举办樱花节,游客前往玉渊潭公园,可以欣赏到20个品种2000株樱花.2016玉渊潭樱花节时间:3月中旬-4月中旬观赏最佳,2016年3月23日开 ...
- 自己写的轻量级PHP框架trig与laravel5.1,yii2性能对比
看了下当前最热门的php开发框架,想对比一下自己写的框架与这些框架的性能对比.先看下当前流行框架的投票情况. 看结果对比,每个测试脚本做了一个数据库的联表查询并进行print_r输出,查询的sql语句 ...
- Owl Carousel幻灯片插件的使用
Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 ...
- 利用sklearn对MNIST手写数据集开始一个简单的二分类判别器项目(在这个过程中学习关于模型性能的评价指标,如accuracy,precision,recall,混淆矩阵)
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...
随机推荐
- tabhost中setup()和setup(LocalActivityManager activityGroup)
如果用系统默认的tabhost时, 直接用getTabhost()初始化,整个类继承tabActivity. 当没有选择系统tabhost默认id时,而是自己定义的id时,必须使用 findViewB ...
- register_globals(全局变量注册开关)
register_globals,是php.ini文件里面的一个配置选项,接下来,我们可以通过例程来分析一下,当register_globals = on 与 register_globals = o ...
- web前端url传递值 js加密解密
一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: <script type=”text/javascript ...
- C#中对于可变性的限制
发现很少有集中讨论C#可变性限制的中文博文(要么就是一大段文字中夹杂很多凌乱的部分),所以写发篇博文,集中讨论,这些限制基本是基于安全考虑,亦或者根本难以实现而产生的. 注:本文不再解释什么是可变性, ...
- 使用内省方式操作JavaBean
内省,英文中称作introspector.主要对javaBean进行操作,JavaBean是一个特殊的Java类,该类中方法名符合特定的规则(其实就是getXXX,setXXX),我们一般是利用get ...
- .Net之美读书系列(二):委托进阶
这次看书的知识点: 事件访问器 如果一个委托中注册了多个事件且需要获取其返回值的方法 委托的异常处理 委托处理超时的方法 异步委托 事件访问器 职能有: 1.对委托属性进行封装,不再直接该委托变量直接 ...
- Java设计模式--单列设计模式
设计模式:解决某一类问题行知最有效的方法.java有23种设计模式 单列设计模式: 解决一个类在内存中只存在一个对象 思路:(要保证对象的唯一性) 1.为了避免其它程序建立该对象,先禁止替他类创建改对 ...
- 使用graphics2D给图片上画字符
//读取图片BufferedImage frontImage = ImageIO.read(new File(eCardXMLConfigManager.geteCardXMLConfigManage ...
- 非常的奇葩,终于解决了硬盘从盘盘符消失的问题 http://bbs.gamersky.com/thread-1712710-1-1.html (出处: 游民星空论坛)
本人用电脑也十多年了,硬盘的问题也碰到过不少.但最近却碰到了一个很奇葩的问题.就是安装了一块全新的SSD硬盘当从盘,但在装上之后,在我的电脑中却不显示,没有盘符.不过打开系统磁盘管理却能显示硬盘信息. ...
- Fibonacci 数列递归 重复计算
public class Fibonacci{ public static long F(long n){ System.out.println("call F" + n); ) ...