2013-05-28 73 views
1

我想修改我的幻灯片以包含通过幻灯片中的图像链接。我的原始代码是,它的工作原理:添加链接到我的幻灯片

VAR slides=new Array("s1.jpg","s2.jpg") 
var slideCntr=slides.length-1 
function slideShow() { 
    slideCntr+=1 
    if (slideCntr==slides.length) slideCntr=0 
    document.getElementById("slideHolder").src = slides[slideCntr] 
    setTimeout("slideShow()",3000) 
} 

在我的代码中,我有5个图像链接显示无。我正在使用一个数组填充图像标记的id并将显示更改为阻止。我想我需要一些东西来改变显示效果。不知道,但我现在不工作,请帮助。我需要帮助的新代码是:

var slides=new Array("slide1","slide2","slide3","slide4","slide5") 
var slideCntr=slides.length-1 
function slideShow(){ 
    slideCntr+=1 
    if (slideCntrl==slides.length) 
    slideCntr=0 
    document.getElementById(slideCntr).style="display: block;" 
    setTimeout("slideShow()",3000)} 
    <body onLoad="slideShow()"> 
    <div> 
    <a href="#"><img id="slide1" src="s1.jpg"></a> 
    <a href="#"><img id="slide2" src="s2.jpg"></a> 
    <a href="#"><img id="slide3" src="s3.jpg"></a> 
    <a href="#"><img id="slide4" src="s4.jpg"></a> 
    <a href="#"><img id="slide5" src="s5.jpg"></a> 
    </div> 
    </body> 
+0

document.getElementById(slideCntr).style =“display:block;”是非常错误的 –

回答

0

此代码工作得很好。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 
    img 
    { 
     display:none; 
    } 
</style> 


</head> 

<body> 
    <div> 
     <a href="#"><img id="slide1" src="1.png"></a> 
     <a href="#"><img id="slide2" src="2.png"></a> 
     <a href="#"><img id="slide3" src="3.png"></a> 
     <a href="#"><img id="slide4" src="4.png"></a> 
     <a href="#"><img id="slide5" src="5.png"></a> 
    </div> 
    <script type="text/javascript"> 
     var slides=new Array("slide1","slide2","slide3","slide4","slide5"); 
     var slideCntr = 1; 
     setInterval(slideShow,3000); 

     function slideShow() 
     { 
      //alert('called'); 
      for(var i = 1 ; i < slides.length+1 ; i++) 
      { 
       document.getElementById("slide"+i).style.display = "none"; 
      } 
      document.getElementById("slide"+slideCntr).style.display = "block"; 
      slideCntr+=1; 
      if(slideCntr == slides.length+1) 
      { 
       slideCntr = 1; 
      } 

     } 
    </script> 
</body> 
</html> 
+0

非常感谢你的帮助。这很好。 –

+0

@IlijaLukic:很高兴我能提供帮助。请您考虑将此标记为公认的答案。 –