每5秒鍾輪換兩個div的內容。 像橫幅旋轉

Question

我想每5秒旋轉兩個div（例如橫幅旋轉）。 第二個div應該在頁面加載時隱藏，並在5秒鍾后出現，第一個div應該隱藏。

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

我們可以每5秒切換一次帶有banner-wrapper div banner-wrapper

JSFiddle示例https://fiddle.jshell.net/n811x6fe/9/

Answer 1

我希望這就是您所需要的：

 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> 

或結帳jsfiddle 。

Answer 2

本示例將每5秒旋轉一次banner-containner div內觸發的每個img

 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>

默認情況下會加載一個橫幅廣告，其他橫幅廣告會依次出現。 如果有機會將路徑添加到js部分，則只需切換要顯示的圖像的src值。 您可以在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：您可能會在這里看到結果