Добро пожаловать в переполнение стека.Я рекомендую вам найти несколько уроков по javascript, прежде чем заняться jquery.Завершение некоторых уроков поможет вам лучше написать код и понять, как лучше сформулировать свои вопросы, когда вы застряли.
Похоже, вы создали 3 класса CSS с атрибутами фонового изображения - flatironimg, kaynesimg и chiassoimg.У вас есть сайт, который автоматически переключает три изображения с помощью элемента slideimg, но вы также хотите дать пользователям кнопку для перемещения слайдов вручную.После того, как пользователь нажал кнопку, вы больше не хотите, чтобы показ слайдов продолжался автоматически.
Я не эксперт по jquery, но я могу дать вам код, который должен помочь вам на вашем пути.Я объясню это постепенно, рефакторинг / комментарии более продвинутых пользователей.
Javascript:
<script type="text/javascript">
var CLASS_ARRAY = ['flatironimg','kaynesimg','chiassoimg'];
var slideIndex = -1;
var automatic = true;
function nextSlide(){
$('#slideimg').fadeOut(600,function(){
slideIndex ++;
// Get the next highest item
if(slideIndex >= CLASS_ARRAY.length){
// If we run out of items, get the first one instead
slideIndex = 0;
}
$('#slideimg').attr('class',CLASS_ARRAY[slideIndex]);
// Swap out the old class attribute for the next one in our array
$('#slideimg').fadeIn(600),setTimeout('autoAdvance()',2000);
// Set the animation and have it autoadvance if appropriate
});
}
function autoAdvance(){
if(automatic) {
nextSlide();
}
}
$(document).ready(function () {
$('#flatironbtn').click(function(){
automatic = false;
nextSlide();
});
$('#resumebtn').click(function(){
automatic = true;
nextSlide();
});
nextSlide();
});
</script>
Хорошо.Что мы тут делаем.Сначала я переместил последовательность ваших изображений из жестко закодированной цепочки анимации jquery в массив.Это поможет вам легко изменить порядок слайд-шоу, добавить новые стили без перекодирования и сохранить читабельность кода.Я также установил индекс для отслеживания того, где мы находимся в списке классов, и флаг, который отслеживает, следует ли нам автоматически продвигать шоу.
var CLASS_ARRAY = ['flatironimg','kaynesimg','chiassoimg'];
var slideIndex = -1;
var automatic = true;
Далее я определил функцию javascriptобработать анимацию и загрузить следующий слайд.Функция представляет собой немного кода многократного использования, который делает одну вещь.Теперь вместо того, чтобы вручную связывать множество анимаций вручную, мы напишем код для однократной анимации слайда и вызовем функцию autoAdvance, чтобы определить, следует ли ее продолжить.
function nextSlide(){
$('#slideimg').fadeOut(600,function(){
slideIndex ++;
// Get the next highest item
if(slideIndex >= CLASS_ARRAY.length){
// If we run out of items, get the first one instead
slideIndex = 0;
}
$('#slideimg').attr('class',CLASS_ARRAY[slideIndex]);
// Swap out the old class attribute for the next one in our array
$('#slideimg').fadeIn(600),setTimeout('autoAdvance()',2000);
// Set the animation and have it autoadvance if appropriate
});
}
Функция autoAdvance оченьпросто.Он проверяет, находимся ли мы в режиме автоматического воспроизведения.Если это так, он загружает следующий слайд, используя функцию выше.
function autoAdvance(){
if(automatic) {
nextSlide();
}
}
Наконец, мы устанавливаем javascript для наших кнопок для управления слайд-шоу и автоматически запускаем первую анимацию:
$(document).ready(function () {
$('#flatironbtn').click(function(){
automatic = false;
// Once the user has clicked, auto-play will turn off
nextSlide();
});
$('#resumebtn').click(function(){
automatic = true;
// Give the user a resume button to pick up where they left off
nextSlide();
});
nextSlide();
});
Также, спасибо Chinmayee за очистку формата вашего кода.Всегда полезно ясно показать людям, что вы пытаетесь сделать, правильно сделав отступ в коде.