通过 <style> 使用带有 CSS 的 JavaScript 函数

Question

我正在制作一个简单的幻灯片。我使用 Javascript 来处理幻灯片，使用 CSS 来显示它。出于某种原因，CSS 完美地显示了第一张图像，但 JavaScript 函数没有与 CSS 一起更改图像。建议？

这是我的代码：

<body>
       <style scoped id="slider">
       html{
            background: url('Africa Twin Mountainside.jpg') no-repeat center              center fixed;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            } 
        </style>




            <script type="text/javascript">
            var images = [
            "Africa Twin Mountainside.jpg",
            "FZ-10.jpg",
            "GSXR track.jpg",
            "Pioneer 1k mountain.jpg",
            "Raptor sand.jpg"
            ];


            var step = 0;
            function slideit(){
            var imageUrl = images[step];
            document.getElementById('slider').src = background;
            step++;
            if(step>=images.length)
            step=0;
            setTimeout("slideit()", 1000);                
            }
            slideit(); 
            </script> 
   </body>

Answer 1

这应该适合你：

var images = [
  "Africa Twin Mountainside.jpg",
  "FZ-10.jpg",
  "GSXR track.jpg",
  "Pioneer 1k mountain.jpg",
  "Raptor sand.jpg"
];

function slideit(step){
  document.getElementById('slider').src = images[step || 0];
  step++;

  if(step === images.length) {
    step = 0;
  }

  setTimeout(function() {
    slideit(step);
  }, 1000);
}

slideit();

Answer 2

这会有点长，但希望这会为您指明正确的方向以正确地修改您的解决方案。

我将从这里开始：<style scoped id="slider">

首先，目前只有Firefox支持<style>标签的scoped属性，所以我暂时完全避免使用它。 scoped 属性的目的是将样式约束到封闭元素，但您可以使用 class 属性轻松地做同样的事情。

由于这是一个简单的单页创意，因此直接在 html 文档中使用 <style> 标签是完全可以接受的，但一般来说，最好创建一个单独的 css 样式表并使用 <link> 标记将其附加到您的页面。如果您确实在 html 文档中包含样式，它通常会在 <head> 标签内找到。

此外，我认为我从未见过有人为 html 标签声明样式；根据我的经验，通常用于 body 标签，但也许有人更了解我可以对此发表评论。

最后，你给了这个样式标签一个 id，但是我认为这没有实际用途，当你尝试在你的 javascript 中使用 [=23] 操作它时=]，您正在选择此 <style> 块 - 它没有 src 属性，因此该段代码根本不执行任何操作。

你真正想在这里使用的是一个 <img> 标签，它确实有一个可以被操纵的 src 属性 - 你在这里走在正确的轨道上，但使用了错误的工具。我会完全放弃你在这里的 <style> 元素，只使用像这样的 <img> ：

<img id="slider" src="Africa Twin Mountainside.jpg">

然后您可以在 css 中设置样式：

#slider {
    width: 100%;
    height: auto;
    margin: auto;
}

这会放大您的图片以占据浏览器的整个宽度；尺寸可以根据您的喜好进行调整。如果您选择的宽度 < 100%，它还会使您的图像在浏览器中居中。

现在我们可以看看您的脚本了。 Peter Chon 的回答是一个写得很好的、有效的解决方案，当与我上面写的 <img> 标签结合使用时，它会起作用，并且基本上与我写的相同。您的脚本部分几乎是正确的，如果您将 Peter 的回答中写的内容与您的回答进行比较，您会发现您几乎正中要害。如果你有问题，他可能愿意进一步解释。

您掌握了如何（大部分）正确地执行幻灯片放映的方法，但是执行不成功，因为您不了解使用什么工具来完成工作。 W3Schools 在这些部分的名声不好，但如果你想了解基础知识而不花钱买书，那么从这里开始是个不错的地方，如果你通读了他们的教程，你至少可以基本了解如何标签及其属性可用于完成事情。

如果我有参考书目我会提供，但我没有。我考虑得到的一个是 John Duckett 的 "HTML and CSS: Design and Build Websites"。亚马逊上的评价不错，但我个人没看过。

通过 <style> 使用带有 CSS 的 JavaScript 函数

Using a JavaScript function with CSS via <style>

javascript

css

arrays

background

slideshow