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

【问题标题】：Rotate Contents of two divs every 5 seconds. like banner rotation每 5 秒旋转两个 div 的内容。像横幅旋转
【发布时间】：2016-10-20 07:12:45
【问题描述】：

我想每 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 秒切换 div 与 banner-wrapper 类吗

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

【问题讨论】：

提供您尝试重新创建的 css/js 代码
是使用 settimeout 功能
横幅轮播是什么意思？
请提供任何对我们有帮助的示例？

标签： javascript jquery html

【解决方案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。

【讨论】：

我对 css 进行了一些更改以隐藏加载时的第二个横幅 jsfiddle.net/ge98vzxz/3

【解决方案2】：

此示例将在 banner-containner div 内每 5 秒触发一次 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>

【讨论】：

【解决方案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：你可能会看到结果here

【讨论】：