Javascript 尝试制作一个简单的JS幻灯片。不起作用。按钮不改变div bg颜色和img src
我试图制作一个简单的JS幻灯片。但它不起作用 上一次还没做，等问题解决了我再做。我有div点来显示两边两个箭头上的哪个img im，以便在照片之间切换 它应该是这样的：Javascript 尝试制作一个简单的JS幻灯片。不起作用。按钮不改变div bg颜色和img src,javascript,jquery,html,slideshow,Javascript,Jquery,Html,Slideshow,我试图制作一个简单的JS幻灯片。但它不起作用 上一次还没做，等问题解决了我再做。我有div点来显示两边两个箭头上的哪个img im，以便在照片之间切换 它应该是这样的： ____________________________________________ | | | | |
____________________________________________
| |
| |
| |
| |
| IMAGE |
| |
| |
| |
| |
| |
| |
| |
|__________________________________________|
| _________ ___ ___ ___ _______ |
| | //___ | | | | | | | | ___\\ | |
| |_\\____| |___| |___| |___| |____//_| |
|__________________________________________|
<html>
<body>
<script type="text/javascript" language="javascript">
function nextimg(){
if(document.getElementById('oneB').style.backgroundColor == black){
document.getElementById('oneB').style.backgroundColor=white;
document.getElementById('twoB').style.backgroundColor = black;
document.getElementById('img').src = "img/img_build.png";
}
else if(document.getElementById('twoB').style.backgroundColor == black){
document.getElementById('twoB').style.backgroundColor=white;
document.getElementById('threeB').style.backgroundColor = black;
document.getElementById('img').src = "img/img_program.png";
}
else if(document.getElementById('threeB').style.backgroundColor == black){
document.getElementById('threeB').style.backgroundColor=white;
document.getElementById('fourB').style.backgroundColor = black;
document.getElementById('img').src = "img/img_rubix.png";
}
else if(document.getElementById('fourB').style.backgroundColor == black){
document.getElementById('fourB').style.backgroundColor=white;
document.getElementById('oneB').style.backgroundColor = black;
document.getElementById('img').src = "img/img_battle.png";
}
}
</script>
<div class="slide">
<image name="img" src="img/img_battle.png" class="image"/>
<div class="navibar">
<button onclick="previmg();" style="font-size:14pt;color:white;width:40px;margin-top:6px;margin-bottom:5px;float:left;background-color:gray;border:2px solid gray;border-radius:2px;"><img style="height:20px;width:20px" src="img/arrow-left.png"/></button>
<div id="oneB" class="blip" style="background-color:black"></div>
<div id="twoB" class="blip"></div>
<div id="threeB" class="blip"></div>
<div id="fourB" class="blip"></div>
<button onclick="nextimg();" style="font-size:14pt;color:white;width:40px;margin-top:6px;margin-bottom:5px;float:left;background-color:gray;border:2px solid gray;border-radius:2px;"><img style="height:20px;width:20px" src="img/arrow-right.png"/></button>
</div>
</div>
</body>
</html>
1避免使用内联线样式。2保留一个引用变量，而不是每次使用getElementBy..查询DOM。因此，您的代码将具有可读性，同时性能略有提高……style.backgroundColor返回的值是一个字符串，您正在与未定义的变量名进行比较。因此，您的if语句都不会执行。实际上，通过更改oneB、twoB等的属性，您想要实现什么。。？目前它们的高度为0，因此不可见。不管怎么说，图像和上一页/下一页都在它们之外。。。