使用JavaScript顯示和隱藏下一個按鈕的圖像

我有四個div，每個div都包含圖像和內容。一個下一個和上一個按鈕。一次只有div會顯示。點擊下一個第二個div必須顯示，並且首先會隱藏。相同的第四格。需要使用純Javascript。 沒有的jQuery或JavaScript插件允許 .... :(誰能幫我做這件事？使用JavaScript顯示和隱藏下一個按鈕的圖像

感謝

我的HTML代碼：！

<html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<div id="container"> 
    <div id="theProduct"> 
    <div id="slides"> <a href="#" class="prev"><img src="img/prev.jpg" width="29" height="29" alt="Arrow Prev"></a> <a href="#" class="next"><img src="img/next.jpg" width="29" height="29" alt="Arrow Next"></a> 
     <!-- Show/hide Div strating here --> 
     <div class="slides_container"> 
     <div class="div1"> 
      <div class="img1"> 
      <div class="price"> 
       <ul> 
       <li class="strike">Rs. 1300</li> 
       <li class="offer">Rs. 1050</li> 
       </ul> 
       <div class="buy"><a href="#">Buy Now</a></div> 
      </div> 

      </div> 
     </div> 
     <div class="div2"> 
      <div class="img2"> 
      <div class="price"> 
       <ul> 
       <li class="strike">Rs. 1300</li> 
       <li class="offer">Rs. 1050</li> 
       </ul> 
       <div class="buy"><a href="#">Buy Now</a></div> 
      </div> 

      </div> 
     </div> 
     <div class="div3"> 
      <div class="img3"> 
      <div class="price"> 
       <ul> 
       <li class="strike">Rs. 1300</li> 
       <li class="offer">Rs. 1050</li> 
       </ul> 
       <div class="buy"><a href="#">Buy Now</a></div> 
      </div> 

      </div> 
     </div> 
     <div class="div4"> 
      <div class="img4"> 
      <div class="price"> 
       <ul> 
       <li class="strike">Rs. 1300</li> 
       <li class="offer">Rs. 1050</li> 
       </ul> 
       <div class="buy"><a href="#">Buy Now</a></div> 
      </div> 

      </div> 
     </div> 

     </div> 
     <!-- Show/Hide Div ending here --> 
    </div> 
    <img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"> </div> 
</div> 
</body> 
</html>

來源

2012-10-17 user1199537

發表您的HTML代碼，在其中添加您的圖像 – polin

添加你的HTML和代碼 –

HTML代碼添加 – user1199537

實用與此下面

<style type="text/css" media="screen"> 
#container{position:relative;width:120px;height:120px;} 
#container div{position:absolute;width:120px;height:120px;} 
#box-red{background:red;} 
#box-yellow{background:yellow;display:none;} 
#box-green{background:green;display:none;} 
#box-maroon{background:maroon;display:none;} 
</style>

javascipt的

<script type="text/javascript"> 
var $c =0; 
function next(){ 
    var boxes = document.getElementsByClassName("box"); 
    $c +=1; 
    if($c >= boxes.length) $c = 0; 
    for (var $i=0;$i<boxes.length;$i++){ 
     boxes[$i].style.display = "none"; 
    } 
    boxes[$c].style.display = "block"; 
    return false; 
} 
function prev(){ 
    var boxes = document.getElementsByClassName("box"); 
    $c -=1; 
    if($c < 0) $c = (boxes.length-1); 
    for (var $i=0;$i<boxes.length;$i++){ 
     boxes[$i].style.display = "none"; 
    } 
     boxes[$c].style.display = "block"; 
    return false; 
} 
</script>

HTML

<div id="container"> 
    <div id="box-red" class="box">DIV1</div> 
    <div id="box-yellow" class="box">DIV2</div> 
    <div id="box-green" class="box">DIV3</div> 
    <div id="box-maroon" class="box">DIV4</div> 
</div> 
    <a href="#" onClick="return prev();">previous</a> &nbsp; <a href="#" onClick="return next();">next</a>

來源

2012-10-17 09:16:19

對於下一個它的工作正常......但對於以前的不工作 – user1199537

固定爲以前的 –

謝謝Bunjerd !.它的工作正常。 – user1199537

我認爲這是你正在尋找熱塑成型爲：
http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript

但是你可以把在一個功能：

<script language="JavaScript"> 
function ShowHide(divId){ 
    if(document.getElementById(divId).style.display == 'none') 
    { 
     document.getElementById(divId).style.display='block'; 
    } 
    else 
    { 
     document.getElementById(divId).style.display = 'none'; 
    } 
} 
</script>

來源

2012-10-17 08:45:43 premik91

能否請你檢查我的html代碼？ – user1199537

是的，上述解決方案將無法正常工作。你需要鏈接。 – premik91

function toggleImage(forwrad){ 
var imageConainer = document.getElementByID(Your Parent div id); 

var images = imageContainer.childNodes; 

var showIndex = ''; 
for(var i=0; i<images.length;i++){ 
    if(images[i].style.display == 'block'){ 
    images[i].style.display == 'none'; 
    if(forwrad){ 
     showIndex = 1+1; 
    } 
    else{ 
     showIndex = 1-1; 
    } 
    } 
} 
images[showIndex].style.display = true; 
}

來源

2012-10-17 08:49:16 AMember

感謝您的回覆。你能檢查我的html代碼嗎？ – user1199537

從技術上講，純CSS也是可能的。與：目標僞類。但是會使用＃標籤污染你的網址。但你可能真的想要那樣。

而且Selectivizr是一個很好的填充工具對舊的瀏覽器

來源

2012-10-17 10:01:31

使用JavaScript顯示和隱藏下一個按鈕的圖像

回答

相關問題