JavaScript幻灯片显示在一个网页

JavaScript Slide Show in a Web Page

本文关键字：一个 网页 幻灯片 显示 JavaScript      更新时间：2023-09-26

我有一个使用javascript在网页上创建一个伪"幻灯片"的任务。这个想法是在屏幕上显示一个图像，用户可以点击下面的按钮来选择他们希望看到的图像。我试图做到这一点，通过改变"显示"属性值在一个简短的javascript，但按钮不做任何事情。

JavaScript: 

function Apples()
        {
            document.getElementById("Apples").style.display="inline";
            document.getElementById("Grapes").style.display="none";
            document.getElementById("Strawberry").style.display="none";
        }
        function Grapes()
        {
            document.getElementById("Apples").style.display="none";
            document.getElementById("Grapes").style.display="inline";
            document.getElementById("Strawberry").style.display="none";
        }
        function Strawberries()
        {
            document.getElementById("Apples").style.display="none";
            document.getElementById("Grapes").style.display="none";
            document.getElementById("Strawberry").style.display="inline";
        }
Html按钮:

<input type="submit" value="Apples" onClick="Apples()" />
<input type="submit" value="Grapes" onClick="Grapes()" />
<input type="submit" value="Strawberries" onClick="Strawberries()" />

"苹果"葡萄"answers"草莓"在javascript中使用的是我给每个图像的id。

我想你有一些命名冲突。输入、ID和名称等的值

这是工作http://jsfiddle.net/3TbMC/

我已将您的方法名称更改为showApples和showGrapes等…

JS 

function showApples()
{
    document.getElementById("Apples").style.display="inline";
    document.getElementById("Grapes").style.display="none";
    document.getElementById("Strawberry").style.display="none";
};
function showGrapes()
{
    document.getElementById("Apples").style.display="none";
    document.getElementById("Grapes").style.display="inline";
    document.getElementById("Strawberry").style.display="none";
};
function showStrawberries()
{
    document.getElementById("Apples").style.display="none";
    document.getElementById("Grapes").style.display="none";
    document.getElementById("Strawberry").style.display="inline";
};
HTML 

<input type="submit" value="Apples" onClick="showApples();" />
<input type="submit" value="Grapes" onClick="showGrapes();" />
<input type="submit" value="Strawberries" onClick="showStrawberries();" />

DEMO

为什么不简单地改变DIV的background-image:

var btn = document.getElementsByClassName("btn");
var n = btn.length;
var img = document.getElementById("image");
var images = {
  "Apples"    : "apples.jpg", // Property MUST MATCH the button value
  "Grapes"    : "grapes.jpg",
  "Strawberry": "strawz.jpg"
};
function changeImage(){
  console.log(images[this.value]);
  img.style.backgroundImage = 'url('+ images[this.value] +')';
}
for(var i=0;i<n;i++) btn[i].onclick = changeImage;


<div id="image"></div>
<input class="btn" type="submit" value="Apples" />
<input class="btn" type="submit" value="Grapes" />
<input class="btn" type="submit" value="Strawberry" />


#image{
  position:absolute;
  width:100%;
  height:100%;
  background: url(apples.jpg) center center;
  background-size: cover;
}

相关文章：