Изменение изображения CSS по таймеру с использованием ключевых кадров

0

Я в значительной степени создал слайд-шоу изображений, в основном используя css,

Интересно, можно ли добавить таймер на следующее слайд-шоу, чтобы изображения менялись каждые 10 секунд.

из моего понимания, CSS будет выглядеть примерно так.

#homeSlide{  
    animation-name: homeSlider;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-direction: alternate;
}

@keyframes homeSlide img FadeInOut {
   0% {   opacity:1;    }
  45% {   opacity:1;    }
  55% {   opacity:0;    }
 100% {   opacity:0;    }
}
  • 3
    Вы должны попробовать это сами, и ТОГДА, когда у вас возникнут проблемы с публикацией кода, который вы пробовали, или того, что ВЫ пробовали, и люди будут рады помочь, просто сделайте это за вас.
  • 0
    @Mark Я пробовал это вместе с ключевым кадром, и он не работал, поэтому я отправляю вопрос, это демонстрируется в моем примере jsFiddle
Показать ещё 1 комментарий
Теги:
css-animations
css-transitions

2 ответа

2
Лучший ответ

Обновить

Сначала я просто посмотрел на тэг jQuery но теперь вижу, что я вижу ссылку adam и тэг о keyframes. Мне было бы интересно посмотреть, как это можно сделать, используя чисто css.

Вот пример использования JQuery, основанный на вашей скрипке.

Update2
Изменен counter=1 вместо counter=0 чтобы зафиксировать переход так, чтобы он не оставался на слайде1 в течение 18 секунд.

var imgLength = $("#homeSlide img").length;
var counter = 1;
var imgInterval;
$(document).ready(function () {
    $("#homeSlide_controls").on('click', 'span', function() {
        $("#homeSlide img").removeClass("opaque");
        var newImage = $(this).index();
        $("#homeSlide img").eq(newImage).addClass("opaque");
        $("#homeSlide_controls span").removeClass("selected");
        $(this).addClass("selected");
        counter = $(this).index();
        clearInterval(imgInterval);
        startInterval();
     });
     startInterval();        
});

function startInterval(){
    imgInterval = setInterval(function(){
            $("#homeSlide img").removeClass("opaque");
            var newImage = counter;
            $("#homeSlide img").eq(newImage).addClass("opaque");
            $("#homeSlide_controls span").removeClass("selected");
            $("#homeSlide_controls span").eq(newImage).addClass("selected");
            counter++;
            if(counter == imgLength){
                counter = 0;
            }
        },9000);
}

http://jsfiddle.net/wg8N6/3/

Поделиться
  • 0
    Одна вещь, которую я заметил, это то, что я получаю следующее сообщение в моем браузере Uncaught ReferenceError: counter не определен
  • 0
    @NewKidOnTheBlock Я посмотрю на это.
Показать ещё 5 комментариев
2

вы можете получить некоторую функцию, которая считывает все эти значения и выполняет некоторый javascript, то есть переходит к следующему изображению
затем вызовите эту функцию следующим образом:

setInterval(YourFunction,3000);

SetInterval будет выполнять YourFunction каждый (в данном случае) 3000 мс, чтобы увидеть запись W3Schools для получения дополнительной информации о setInterval.

Поделиться
  • 1
    я так понимаю, мне нужно будет использовать подход JS, а не подход CSS?
  • 0
    Ну, возможно, я смогу заставить его работать с анимацией css3, но это не сработало бы в некоторых браузерах (например, <ie10)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню