Question

我刚创建这个幻灯片只是为了检查它是否有效，然后我根据自己的网站进行更改，但幻灯片放映似乎没有效果。图像全部一个显示在另一个之下。

这里是JS Fiddle 有人可以帮我找出它为什么不能工作吗？我链接它的方式有问题吗？或者代码可能错了？

<script> 
var step = 1 
function SlideShow(){ 
  if(!document.images) 
    return document.images.MySlide.src = eval("image"+step+".src") 
  if(step<4) 
    step++ 
  else
    step=1 
  setTimeout("SlideShow()",1000) 
} 
SlideShow() 
</script>

我也使用了这段代码，但它仍然没有用。

Answer 1

您的css类中存在语法错误。

而不是这个

#slideshow {
    margin: 50px auto;
    position: relative;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    width="600px";
    height="400px"
}

使用它：

#slideshow {
    margin: 50px auto;
    position: relative;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    width:600px;
    height:400px;
    overflow:hidden;
}

Answer 2

您的脚本中存在拼写错误和语法错误。

$("#slideshow > div:gt(0))".hide();

setInterval(function () {
    $('slideshow> div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}, 3000);

我已将其更改为：

$("#slideshow > div:gt(0)").hide();

setInterval(function () {
    $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}, 3000);

<强> WORKING SAMPLE

Answer 3

我已更正了some parts您的代码，但它有效here。

以下是代码的原始版本：

$("#slideshow > div:gt(0))".hide();

setInterval(function () {
    $('slideshow> div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}, 3000);

以下是更正后的内容：

$("#slideshow > div:gt(0)").hide();

setInterval(function () {
    $('#slideshow> div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}, 3000);

<强>更正

$("#slideshow > div:gt(0))".hide(); =＆gt; $("#slideshow > div:gt(0)").hide();
$('slideshow> div:first') =＆gt; $('#slideshow> div:first')

为什么简单的幻灯片不起作用？

3 个答案: