Javascript 单击“下一个”或“上一个”时更改图像

各位。我希望我的隐藏分区图像在单击“上一页”后更改。或者下一步。是否可以使用这个JS代码

    <a href="#"><div onClick="show(this);" class="img" style="background-image:url('css/images1/img/img1.jpg');")></div></a>
   <a href="#"><div onClick="show(this);" class="img" style="background-image:url('css/images1/img/img2.jpg');")></div></a>
   <a href="#"><div onClick="show(this);" class="img" style="background-image:url('css/images1/img/img3.jpg');")></div></a>

<div id="hidden_div"></div>
<a href="#" onClik="next(-1)">prev</a>
<a href="#" onClik="next(1)">next</a>


<script>
function show(element) {
    var hidden = document.getElementById("hidden_div"); 
    var imgURL = element.style.backgroundImage.replace('url(','').replace(')','');    
    var imgElement = "<img src="+ imgURL +" />" 
    hidden.innerHTML  = imgElement;
};

var step=1;
var total=3;
 function next(x){ 
    var image=document.getElementById("hidden_div");

    step=step+x;
    if(step > total){step=1;}
     if(step <1 ){step=total;}
     image.src= 'css/images1/img/img " + step + ".jpg';
   };   

---

我认为问题在于未定义的变量step1和total1。你能试着用step和total替换这些变量吗

function next(x)
{ 
    var image=document.getElementById("hidden_div");
    var step=step+x;
    if(step > total) 
       step=1;
    else if(step <1 )
       step=total;
    image.src= 'css/images1/img/img'+step+'.jpg';
}  

---

src更改不起作用的原因是，在下一个函数中，您试图将src属性设置为div元素，而不是其中的图像

您要更改的映像没有id，因此要以div标记内的映像为目标，您需要使用getElementById以div为目标，并将getElementsByTagName附加到目标

.img{高度：150px；宽度：150px；边框：纯红1px；显示：内联块；} 1. 2. 3. 普雷弗奈特

---

谢谢你的回答，但它仍然不起作用。我在代码中进行了更正。你确定你给出的src路径是正确的吗？是的。我确定。我只是简单地复制和粘贴了。试着用src'css/images1/img/img'+step+'。jpg'这是一种非常奇怪的方式来构建库，但每个人都有自己的。我假设带img类的div是图库的大拇指，而隐藏的div是图像的主要显示？是的，你是对的。实际上我的JS的第二部分是试用版。你有没有更简单的方法来连接我代码的两部分？当点击图片时，我想要一个类似facebook的滑块。我是这样想的。这很可能，但我没有提交答案的原因是因为我纠正你的下一步功能的方法是改变画廊的工作方式，这会导致太多的更改，可能会被归类为我重建你的源代码，而不是解决手头的问题，对不起。哦，不要抱歉，我亲爱的朋友，没关系：谢谢你的回答，但它仍然不起作用。我想可能是因为我插入了JS的img。这修复了要求的step/next函数。我也来看看你的表演，给我一点时间。不，没用。为了确保这一点，我甚至把标签改成了另一个标签。您的源代码可能存在其他问题，但这回答了您关于如何修复下一个函数的问题。检查您的浏览器控制台是否有错误。好的，我将再次检查我的代码。非常感谢您的帮助和时间：

 getElementById().getElementsByTagName()[0]

function next(x){ 
    step=step+x;
    if(step > total){step=1;}
     if(step <1 ){step=total;}
     document.getElementById("hidden_div").getElementsByTagName('img')[0].src='css/images1/img/img'+step+'.jpg'
}

<a href="#" onClik="next(-1)">prev</a>