- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在锻炼,我尝试在纯 JS 上编写自己的轮播。
window.onload = function () {
var slider = document.getElementById('slide-list');
var left = document.getElementById('rewind');
var right = document.getElementById('forward');
var clickDisabled = false;
function spin() {
slider.firstChild.style.marginLeft = -800 + 'px';
setTimeout(function () {
slider.appendChild(slider.removeChild(slider.firstChild));
slider.lastChild.style.marginLeft = '0px';
}, 2000);
}
var slideShow = setInterval(spin, 4000);
left.onclick = function () {
if (clickDisabled) {return;}
else {
clickDisabled = true;
clearInterval(slideShow);
slider.lastChild.style.marginLeft = -800 + 'px';
slider.insertBefore(slider.lastChild, slider.firstChild);
// the crutch - try to unwrap content from timeout and see that image changes instantly, with no transition
setTimeout(function () { slider.firstChild.style.marginLeft = '0px'; }, 1);
slideShow = setInterval(spin, 4000);
setTimeout(function() {clickDisabled = false;}, 2000);
}
}
right.onclick = function () {
// fix of fast sliding after multiple clicks
if (clickDisabled) {return;}
else {
clickDisabled = true;
clearInterval(slideShow);
spin();
slideShow = setInterval(spin, 4000);
setTimeout(function() {clickDisabled = false;}, 2000);
}
}
}
我的想法是我有一个包含旋转木马幻灯片的列表,我使用 setInterval 重新排列这些幻灯片。平滑的滑动过渡是通过在 CSS 中使用过渡并更改幻灯片的边距来实现的 - 因此过渡使其平滑滑动。
Auto-spinning 工作正常,没有问题,问题是手动更改幻灯片,使用左右按钮。问题是,如果没有一根(对我来说)非常奇怪的拐杖,它就无法工作。它在代码中标记(第 28 行)。似乎有什么东西阻止了过渡到完成,没有那个拐杖图像就没有过渡。我也非常感谢您对我的临时阻止按钮的 onclick 事件的想法发表评论,以防止按钮被多次单击时出现困惑和即时滑动。也许这是一个糟糕的方法?有什么方法可以更好?
最佳答案
您可以使用我构建的这个图像 slider ...虽然它只适用于现代浏览器。
http://codepen.io/team/moderndeveloper/pen/MKgqzq
/* global Modernizr */
if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: function(target) {
'use strict';
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
nextSource = Object(nextSource);
var keysArray = Object.keys(nextSource);
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
}
});
}
(function(window, document, Modernizr) {
"use strict";
var d = document;
var transform = Modernizr.prefixed('transform');
function ImageSliderIndicators(imageSlider, options) {
this.imageSlider = imageSlider;
this.options = Object.assign({}, ImageSliderIndicators.DEFAULTS, options || {});
this.el = d.querySelector('.' + this.options.indicatorsClass);
this.indicators = [].slice.call(d.querySelectorAll('.' + this.options.indicatorClass));
this.imageSlider.el.addEventListener('positionChanged', this.onPositionChanged.bind(this));
this.el.addEventListener('click', this.onIndicatorClick.bind(this), false);
this.onPositionChanged();
}
ImageSliderIndicators.DEFAULTS = {
indicatorsClass: 'ImageSlider-indicators',
indicatorClass: 'ImageSlider-indicator',
indicatorActiveClass: 'ImageSlider-indicator--is-active'
};
ImageSliderIndicators.prototype.onIndicatorClick = function onIndicatorClick(event) {
var position = this.indicators.indexOf(event.target);
if (position !== -1) {
this.imageSlider.goto(position);
}
};
ImageSliderIndicators.prototype.onPositionChanged = function onPositionChanged() {
var self = this;
this.indicators.forEach(function(element, index) {
var action = index === self.imageSlider.position ? 'add' : 'remove';
element.classList[action](self.options.indicatorActiveClass);
});
};
function ImageSlider(options) {
this.options = Object.assign({}, ImageSlider.DEFAULTS, options || {});
this.position = 0;
this.el = d.querySelector('.' + this.options.imageSliderClass);
this.items = d.querySelector('.' + this.options.itemsClass);
this.itemCount = d.querySelectorAll('.' + this.options.itemClass).length;
this.scroller = d.querySelector('.' + this.options.scrollerClass);
this.previousButton = d.querySelector('.' + this.options.previousButtonClass);
this.nextButton = d.querySelector('.' + this.options.nextButtonClass);
this.indicators = new ImageSliderIndicators(this, this.options.indicators);
window.addEventListener('resize', this.render.bind(this));
this.nextButton && this.nextButton.addEventListener('click', this.next.bind(this));
this.previousButton && this.previousButton.addEventListener('click', this.previous.bind(this));
}
ImageSlider.DEFAULTS = {
imageSliderClass: 'ImageSlider',
itemsClass: 'ImageSlider-items',
itemClass: 'ImageSlider-item',
scrollerClass: 'ImageSlider-scroller',
previousButtonClass: 'js-ImageSlider-button--previous',
nextButtonClass: 'js-ImageSlider-button--next'
};
ImageSlider.prototype.render = function render() {
this.items.style[transform] = 'translate3d(' + (-this.position * this.items.offsetWidth) + 'px,0,0)';
};
ImageSlider.prototype.goto = function goto(position) {
var event = d.createEvent('Event');
event.initEvent('positionChanged', true, true);
this.position = position;
this.el.dispatchEvent(event);
this.render();
};
ImageSlider.prototype.previous = function previous() {
this.goto((this.position + (this.itemCount - 1)) % this.itemCount);
};
ImageSlider.prototype.next = function next() {
this.goto((this.position + 1) % this.itemCount);
};
window.ImageSlider = ImageSlider;
}).call(this, window, window.document, Modernizr);
new ImageSlider();
关于javascript - 纯 JS 轮播错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30391432/
我在我的应用程序中使用开源 iCarousel 来实现轮播控件。我使用的轮播类型是 iCarouselTypeRotary 并且图像在这种类型中线性排列。但是,我需要图像像所附图像中的旋转木马一样带来
有人看过像这样的 jQuery 3D 轮播教程吗? http://web.enavu.com/demos/3dcarouselwip/ 没有给出来源,但想知道是否有人有关于如何连续圈出 DIV 并调整
我正在开发一种使用相机自动拍摄照片的软件。我希望用户能够设置照片间隔。我希望它看起来和工作起来像某种轮播。 它应该是这样的: 当我滑动(或用鼠标拖动)时,它应该沿给定方向移动: 所选项目应始终位于中间
抱歉问了个愚蠢的问题。我正在寻找带有按钮的旋转木马。我在 Bootply 上找到了这个模板,它完全符合我的要求。我在开发方面还很陌生。 也许有人可以向我解释如何摆脱侧面滚动效果。我知道我必须向 Jav
我正在寻找一个可以处理表单元素的 jQuery 轮播风格插件。 这是我需要做的。 我有三个表单元素:两个常规文本框和一个文本区域。还有两个按钮,上一个和下一个。 单击下一步按钮时,文本框/文本区域会切
我想构建一个包含两个图像轮播的网页,并且我希望能够将图像从一个轮播拖动到另一个。 我已经有了与 jCarouselLite 一起使用的图像轮播:它使用两个 UL 元素来指定轮播的图像。这工作得很好。
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我有这段代码可以从数据库中获取轮播图片或视频 $stmt = $con->prepare("SELECT * FROM `Main`"); $stmt->execut
我需要做这个 slider ,我找到了一些代码并尝试了,但没有一个完全是 LIKE THIS .bloco03 img {
我的任务是制作 3 张图片的轮播/幻灯片,只能在移动设备上使用。在桌面上,这些图像将显示在 3 列中。有没有一种方法可以自动转换,而无需我创建两个不同的模块并根据屏幕尺寸隐藏/显示一个? 最佳答案 你
我需要在卡片轮播上创建这种效果。我使用 Owl Carousel ,我给了元素框阴影。但我坚持制作不同位置元素的效果,例如 3d 或任何名称。 这是我想做的 http://www.awesomescr
我已经盯着这段相同的代码看了大约 4 个小时,并尝试观看一些不同的教程。问题是 slider 加载,有 3 张幻灯片的空间,但它只显示第一张幻灯片。 所有图像加载良好(在浏览器中验证),但轮播不会更改
我的 carouse/slider 有问题,我已经做到了,上一张和下一张图片每边各占 25%,中央图片占 50% 宽度。问题是我能够更改左右图像的背景,但我似乎无法将相同的颜色应用于中间图像。我已经尝
我想一次放 5 张图片作为页面的背景,即一张图片会显示一小段时间(比如每张一秒钟),然后重复它们。 我想知道有没有办法用 CSS 或 JS 来做到这一点? 预先感谢您的帮助! 最佳答案 这也许就是您正
我正在寻找一个支持触摸、可拖动、响应式 jQuery 滚动条/幻灯片/轮播/ slider ,用于显示水平可滚动项目列表(例如, eshop、最近将照片添加到数据库等)。 它看起来类似于苹果应用程序商
我想要夹层画廊的 Bootstrap 轮播。基本上;我正在拉入所有图像,并且我想要单行三张图像轮播。这是我非常讨厌的一段工作代码;我真的很想让它适用于无限数量的图像。 {% if page.d
大家好,我有这段代码,我一直在为我的网站编写代码。我正在尝试实现一个轮播功能,其中一张图片在另一张图片之后滑动。我遇到的问题是图片不会滑动。这是我的代码在欢迎 Controller 的索引页面中的样子
我正在构建一个简单的轮播,一旦用户水平滚动,事件点就会改变事件状态。但是,当我滚动时,jQuery 左侧位置返回值没有改变: li_left = li.position().left; // this
我正在尝试将文本放在轮播 slider 中的图像下方,但现在文本出现在图像上,而不是下方。 它看起来像这样: 但我希望它看起来像这样: 这是我的代码: final CarouselSlider aut
我在使用 boostrap carousel 时遇到 CSS 问题 我只是想让它更高,我已经尝试了几个 css 但没有任何效果。代码是在这个 jsFiddle 中,http://jsfiddle.ne
我是一名优秀的程序员,十分优秀!