Question

每个人。我希望我的hidden_div img在点击prev后更改。或者下一步。是否可以使用这个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';
   };

Answer 1

我认为问题在于未定义的变量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';
}

Answer 2

src更改无效的原因是因为在next()函数中，您尝试将src属性设置为div元素，而不是其中的图像。

您要更改的图片没有ID，因此要定位div标签内的图片，您需要使用getElementById()定位div并附加getElementsByTagName以定位{ {1}}。

<img>

 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>应为onClik。简单的输入错误，但在代码方面有很大的不同。

onClick

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 total=3;
var step=1;
 function next(x){ 
    step=step+x;
    if(step > total){step=1;}
     if(step <1 ){step=total;}
     document.getElementById("hidden_div").getElementsByTagName('img')[0].src='http://coded4u.com/SO/image'+step+'.jpg'
   }

.img{height:150px;width:150px;border:solid red 1px;display:inline-block;}

我希望这会有所帮助。快乐的编码！

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

2 个答案: