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

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}触发img banner-containner内每div个旋转

＆＃13;

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

＆＃13;

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

＆＃13;

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作为默认值加载，其他人将轮流加载。如果您有机会将pats添加到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：您可能会看到结果here

每5秒旋转两个div的内容。像横幅旋转

3 个答案: