gpt4 book ai didi

javascript - 纯 JS 轮播错误

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:43:07 25 4
gpt4 key购买 nike

我正在锻炼,我尝试在纯 JS 上编写自己的轮播。

JSFiddle

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com