Question

我几乎主要使用css创建了一个图片幻灯片，

我想知道是否可以在以下slide show上添加计时器，以便图像每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;    }
}

Answer 1

你可以有一些函数读取所有这些值并执行一些javascript，即更改为下一个图像
然后像这样调用这个函数：

setInterval(YourFunction,3000);

SetInterval将每次执行YourFunction（在本例中为3000ms）有关setInterval的更多信息，请参阅the W3Schools条目。

Answer 2

<强>更新

我最初只是查看了您的jQuery代码，但现在我看到了adam的链接和关于keyframes的标记。我很想知道如何使用纯css来完成这项工作。

这是一个使用JQuery的例子，基于你的小提琴。

<强> UPDATE2
更改了counter=1而不是counter=0来修复转换，以便它不会在slide1中停留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/

使用关键帧在计时器上更改CSS图像

2 个答案: