Question

我是jquery / Javascript的新手。

问：假设我有35张图片，屏幕尺寸为1200像素。第一次前5个图像淡入，并且在相同位置几秒后，接下来5个图像将淡入IN并且前一个淡出淡出，而接下来的五个淡入淡出将直到所有显示的图像以及所有图像递归时。 / p>

我正在获得一个图像淡入淡出的示例在与另一个淡出的交换中但不是多个图像一个。

......

等等

 var totalLengthphotobanner =  $('.imageClick').width()+$newPos*count;
 var $photobannerWidth = $('.photobanner').width();
 var allImage = $('img');
 var count = $( ".photobanner" ).find( allImage ).length;
 var $noOfImg;
 var $width = $('.imageClick').width();
 var $gap = 150;
 var $track =0;
 $noOfImg = Math.floor(($gap+$photobannerWidth)/($width+$gap));
 //alert($noOfImg);
 $images =1;
 $keepCount =1;
 while($keepCount<count)
    {
        var $newPos = 0;
        var $addPos = 250;
            if($track>=$noOfImg){
                for($images=1;$images<=$noOfImg;$images++){
                    $('#sponsor-'+$keepCount).css('position','absolute');
                    $('#sponsor-'+$keepCount).css('left',$newPos+'px');
                    $('#sponsor-   '+$keepCount).fadeIn(1500).delay(3500).fadeOut(1500);
                    $newPos = $newPos+$addPos;
                    $keepCount = $keepCount+1;
                }
            }else{
                for($images=1;$images<=$track;$images++){
                    $('#sponsor-'+$keepCount).css('position','absolute');
                    $('#sponsor-'+$keepCount).css('left',$newPos+'px');
                    $('#sponsor-'+$keepCount).fadeIn(1500).delay(3500).fadeOut(1500);
                    $newPos = $newPos+$addPos;
                    $keepCount = $keepCount+1;
                }
          }
      $track = count - $images;
    }

Answer 1

我正在尝试完成一个简单的模型，我不确定它是否是你想要的。我已经使用递归函数来做一些循环工作。

$("#move").click(function() {
  fadeFunc();
});

function fadeFunc() {
  $(".current").fadeOut("normal", function() {
    $(this).removeClass("current");
    if ($(this).next()) {
      $(this).next().addClass("current");
      $(this).next().fadeIn().delay(2000).fadeOut("normal", fadeFunc);
    }
  });
}

#container {
  width: 400px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}
.img_group {
  width: 380px;
  height: 180px;
  margin: 10px;
  display: inline-block;
  background-color: #aaa;
}
.img {
  background-color: #ccc;
  width: 100px;
  height: 160px;
  margin: 10px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="container">
  <div class="img_group current">
    <div class="img">Group 1</div>
    <div class="img">Group 1</div>
    <div class="img">Group 1</div>
  </div>
  <div class="img_group">
    <div class="img">Group 2</div>
    <div class="img">Group 2</div>
    <div class="img">Group 2</div>
  </div>
  <div class="img_group">
    <div class="img">Group 3</div>
    <div class="img">Group 3</div>
    <div class="img">Group 3</div>
  </div>
</div>
<button id="move">Move</button>

我将多个图像包装在一个<div class="img_group">中。

淡出图像并替换为另外5个等等？

1 个答案: