Rotate Contents of two divs every 5 seconds. like banner rotation

Question

I want to rotate two div's every 5 seconds (like banner rotation). Second div should be hidden on page load, and after 5 seconds it should appear and the first div should be hidden.

<div class="banner-containner">
  <div class="banner-wrapper">
    <img src="http://placehold.it/200x300?text=Banner One">
    <img src="http://placehold.it/200x60?text=Banner Base">
  </div>
  <div class="banner-wrapper">
    <img src="http://placehold.it/200x300?text=Banner Two">
  </div>
</div>

can we toggle div with class banner-wrapper every 5 seconds

JSFiddle example https://fiddle.jshell.net/n811x6fe/9/

Answer 1

I hope thats it what you need:

 var $container = $('.banner-containner'); var $bannerWrappers = $container.find('.banner-wrapper'); var idx = 0; setInterval(function() { if(idx === $bannerWrappers.length) { idx = 0; } $bannerWrappers.hide().eq(idx).toggle(); idx++; }, 5000); 

 .banner-containner { max-width: 200px; height: auto; float:left; border: 1px solid #f00; } .banner-wrapper { float:left; width: 100%; height: auto; } .xbanner-wrapper img { position: relative; width: 100%; float: left; } .banner-wrapper:last-child{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="banner-containner"> <div class="banner-wrapper"> <img src="http://placehold.it/200x300?text=Banner One"> <img src="http://placehold.it/200x60?text=Banner Base"> </div> <div class="banner-wrapper"> <img src="http://placehold.it/200x300?text=Banner Two"> </div> </div> 

Or checkout jsfiddle .

Answer 2

this example wil rotate every img inside banner-containner div 's triggered every 5 seconds

 var deg = 0; var wrapper = 0; function rotatingImagesOfClass(classelement) { deg += 10; if(deg == 360+10){ wrapper++; deg = 0; setTimeout(function(){rotatingImagesOfClass(classelement)},5000); }else setTimeout(function(){rotatingImagesOfClass(classelement)},36); if(wrapper == classelement.length){ wrapper = 0; deg = 0; } for(var i=0;i<classelement[wrapper].getElementsByTagName("img").length;i++){ classelement[wrapper].getElementsByTagName("img")[i].style.webkitTransform = 'rotate('+deg+'deg)'; classelement[wrapper].getElementsByTagName("img")[i].style.mozTransform = 'rotate('+deg+'deg)'; classelement[wrapper].getElementsByTagName("img")[i].style.msTransform = 'rotate('+deg+'deg)'; classelement[wrapper].getElementsByTagName("img")[i].style.oTransform = 'rotate('+deg+'deg)'; classelement[wrapper].getElementsByTagName("img")[i].style.transform = 'rotate('+deg+'deg)'; } } var wrp = document.getElementsByClassName("banner-wrapper"); rotatingImagesOfClass(wrp); 

 <div class="banner-containner"> <div class="banner-wrapper"> <img src="http://placehold.it/200x300?text=Banner One"> <img src="http://placehold.it/200x60?text=Banner Base"> </div> <div class="banner-wrapper"> <img src="http://placehold.it/200x300?text=Banner Two"> </div> </div> 

Answer 3

<div class="banner-containner">
    <div class="banner-wrapper">
        <img id="bannerImage" src="http://placehold.it/200x300?text=Banner One">
        <img id="imageBase" src="http://placehold.it/200x60?text=Banner Base">
    </div>
</div>

Banner One is loaded as default then the others will come in their turn. If you have a chance to add the pathes to the js part, you can just switch the src value of the image to be displayed. You can do it with some help of javascript.

var imageArray = ['http://placehold.it/200x300?text=Banner Two', 
                  'http://placehold.it/200x300?text=Banner Three',
                  'http://placehold.it/200x300?text=Banner One'];

var i = 0;


setInterval(function() {

    i = ++i % imageArray.length;

    $('#bannerImage').attr("src", imageArray[i]);
}, 5000);

JSFiddle: You may see the result here