问题描述
我对 javascript 一无所知,但一位客户问我是否可以让这个滑块自动播放。如果有人可以提供帮助,那就太棒了。我试图让它工作但无济于事,所以我决定在这里寻求帮助。
https://codepen.io/mrspok407/pen/bwLwvL
$(document).ready(function() {
const $cont = $('.cont');
const $slider = $('.slider');
const $nav = $('.nav');
const winW = $(window).width();
const animspd = 750; // Change also in CSS
const distOfLetGo = winW * 0.2;
let curSlide = 1;
let animation = false;
let autoScrollVar = true;
let diff = 0;
// Generating slides
let arrCities = ['Amsterdam','Rome','New—York','Singapore','Prague']; // Change number of slides in CSS also
let numOfCities = arrCities.length;
let arrCitiesDivided = [];
arrCities.map((city) => {
let length = city.length;
let letters = Math.floor(length / 4);
let exp = new RegExp(".{1," + letters + "}","g");
arrCitiesDivided.push(city.match(exp));
});
let generateSlide = function(city) {
let frag1 = $(document.createDocumentFragment());
let frag2 = $(document.createDocumentFragment());
const numSlide = arrCities.indexOf(arrCities[city]) + 1;
const firstLetter = arrCitiesDivided[city][0].charat(0);
const $slide =
$(`<div data-target="${numSlide}" class="slide slide--${numSlide}">
<div class="slide__darkbg slide--${numSlide}__darkbg"></div>
<div class="slide__text-wrapper slide--${numSlide}__text-wrapper"></div>
</div>`);
const letter =
$(`<div class="slide__letter slide--${numSlide}__letter">
${firstLetter}
</div>`);
for (let i = 0,length = arrCitiesDivided[city].length; i < length; i++) {
const text =
$(`<div class="slide__text slide__text--${i + 1}">
${arrCitiesDivided[city][i]}
</div>`);
frag1.append(text);
}
const navSlide = $(`<li data-target="${numSlide}" class="nav__slide nav__slide--${numSlide}"></li>`);
frag2.append(navSlide);
$nav.append(frag2);
$slide.find(`.slide--${numSlide}__text-wrapper`).append(letter).append(frag1);
$slider.append($slide);
if (arrCities[city].length <= 4) {
$('.slide--'+ numSlide).find('.slide__text').css("font-size","12vw");
}
};
for (let i = 0,length = numOfCities; i < length; i++) {
generateSlide(i);
}
$('.nav__slide--1').addClass('nav-active');
// Navigation
function bullets(dir) {
$('.nav__slide--' + curSlide).removeClass('nav-active');
$('.nav__slide--' + dir).addClass('nav-active');
}
function timeout() {
animation = false;
}
function pagination(direction) {
animation = true;
diff = 0;
$slider.addClass('animation');
$slider.css({
'transform': 'translate3d(-' + ((curSlide - direction) * 100) + '%,0)'
});
$slider.find('.slide__darkbg').css({
'transform': 'translate3d(' + ((curSlide - direction) * 50) + '%,0)'
});
$slider.find('.slide__letter').css({
'transform': 'translate3d(0,0)',});
$slider.find('.slide__text').css({
'transform': 'translate3d(0,0)'
});
}
function navigateRight() {
if (!autoScrollVar) return;
if (curSlide >= numOfCities) return;
pagination(0);
setTimeout(timeout,animspd);
bullets(curSlide + 1);
curSlide++;
}
function navigateLeft() {
if (curSlide <= 1) return;
pagination(2);
setTimeout(timeout,animspd);
bullets(curSlide - 1);
curSlide--;
}
function toDefault() {
pagination(1);
setTimeout(timeout,animspd);
}
// Events
$(document).on('mousedown touchstart','.slide',function(e) {
if (animation) return;
let target = +$(this).attr('data-target');
let startX = e.pageX || e.originalEvent.touches[0].pageX;
$slider.removeClass('animation');
$(document).on('mousemove touchmove',function(e) {
let x = e.pageX || e.originalEvent.touches[0].pageX;
diff = startX - x;
if (target === 1 && diff < 0 || target === numOfCities && diff > 0) return;
$slider.css({
'transform': 'translate3d(-' + ((curSlide - 1) * 100 + (diff / 30)) + '%,0)'
});
$slider.find('.slide__darkbg').css({
'transform': 'translate3d(' + ((curSlide - 1) * 50 + (diff / 60)) + '%,0)'
});
$slider.find('.slide__letter').css({
'transform': 'translate3d(' + (diff / 60) + 'vw,});
$slider.find('.slide__text').css({
'transform': 'translate3d(' + (diff / 15) + 'px,0)'
});
})
})
$(document).on('mouseup touchend',function(e) {
$(document).off('mousemove touchmove');
if (animation) return;
if (diff >= distOfLetGo) {
navigateRight();
} else if (diff <= -distOfLetGo) {
navigateLeft();
} else {
toDefault();
}
});
$(document).on('click','.nav__slide:not(.nav-active)',function() {
let target = +$(this).attr('data-target');
bullets(target);
curSlide = target;
pagination(1);
});
$(document).on('click','.side-nav',function() {
let target = $(this).attr('data-target');
if (target === 'right') navigateRight();
if (target === 'left') navigateLeft();
});
$(document).on('keydown',function(e) {
if (e.which === 39) navigateRight();
if (e.which === 37) navigateLeft();
});
$(document).on('mousewheel DOMMouseScroll',function(e) {
if (animation) return;
let delta = e.originalEvent.wheelDelta;
if (delta > 0 || e.originalEvent.detail < 0) navigateLeft();
if (delta < 0 || e.originalEvent.detail > 0) navigateRight();
});
});
任何帮助将不胜感激,因为我对 Java 一无所知。
解决方法
好的,经过一番挖掘,我找到了解决方案,它实际上很简单。
只需添加
setInterval(function () {
navigateRight();
},3000);
之后
$(document).ready(function () {
它看起来像这样:
$(document).ready(function () {
setInterval(function () {
navigateRight();
},3000);
const $cont = $('.cont');
const $slider = $('.slider');
const $nav = $('.nav');
const winW = $(window).width();
const animSpd = 750; // Change also in CSS
const distOfLetGo = winW * 0.2;
let curSlide = 1;
let animation = false;
let autoScrollVar = true;
let diff = 0;
我会把这篇文章留给任何寻找类似解决方案的人。
,您要查找的是 setInterval
,这将在 X 毫秒后运行一个函数。
这个函数:
// true or false based on existance of the attribute
const shouldAutoplay = $slider.attr('data-autoplay');
const interval = 5000; // 5 Seconds
let autoplayIntervalHandle = null;
function autoplay(shouldAutoplay,intervalInMS) {
if (!shouldAutoplay) return;
autoplayIntervalHandle = setInterval(() => setTimeout(navigateRight,animSpd),intervalInMS || 3000);
}
// place this near the bottom of your $(document).ready(function() { ... });
autoplay(shouldAutoplay,interval);
这应该足以让您的客户满意,但使用 setInterval
会使某些网站变慢。
我制作了 autoplayIntervalHandle
以便您可以使用 clearInterval
重置和清除计时器。如果出现性能问题,我只会担心。