Show and hide images with next previous button using Javascript

Question

I have four divs, each div contain images and contents. one next and previous button. at a time only div will show. on click of next the second div have to be shown and first will hide. same upto fourth div. Need to use pure Javascript. No jquery or javascript plugins is allowed.... :(. Can anyone help me to do this?.

Thanks!

My html Code:

<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>

post your html code where you are adding your images – polin Oct 17 '12 at 08:42 — polin, Oct 17 '12 at 08:42

Bunjerd Sparrow · Accepted Answer · 2012-10-17T10:02:12.583

Practical with this below

<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>

For the next its working fine... but for the previous its not working — user1199537, Oct 17 '12 at 09:21

score 0 · Answer 2 · answered Oct 17 '12 at 08:45

I think this is what you are loking for:
http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript

But you could put that in one function:

<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>

AMember · Answer 3 · 2012-10-17T09:47:30.450

0

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;
}

edited Oct 17 '12 at 09:47

answered Oct 17 '12 at 08:49

AMember

3,037
2
33
64

score 0 · Answer 4 · answered Oct 17 '12 at 10:01

0

technically it's possible with pure CSS as well. with the :target pseudo class. but that would pollute your url with # tags. But you may actually want that.

Also Selectivizr is a good polyfill for old browsers

answered Oct 17 '12 at 10:01

Naman Goel

1,525
11
16

Show and hide images with next previous button using Javascript

4 Answers4

Linked