将视差与图像幻灯片一起使用

我正在尝试用我制作的一个简单的幻灯片来创建视差效果。

首先，我有一个仅具有基本parallax.js实现的：小提琴：https://jsfiddle.net/jzhang172/bcdkvqtq/1/

.parallax-window {
    min-height: 400px;
position:relative;
}
.ok{
font-size:50px;
background:gray;
color:blue;
height:300px;
width:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window" data-parallax="scroll" data-image-src="http://vignette4.wikia.nocookie.net/pokemon/images/5/5f/025Pikachu_OS_anime_11.png/revision/latest?cb=20150717063951g">
  
</div>
<div class="ok">Hey there</div>

然而，这是有效的，现在我想在图像幻灯片上使用这种效果，无论是否使用视差.js都可以，但我想要相同的视差效果：

我不知道如何将其应用于图像：

小提琴：https://jsfiddle.net/jzhang172/k4fygvhg/1/

$(document).ready(function() {
var slides = $('.featured-wrapper img');
var slideAtm = slides.length;
var currentPos = 0;
slides.hide();
 function roll(){
    var slide = slides.eq(currentPos);
    slide.fadeIn(2000);
        setTimeout(up,1500);
    }
 
 roll();
 
 function up(){
 currentPos +=1;
 slides.fadeOut(1500);
 setTimeout(roll, 500);
    if(currentPos > slideAtm -1){
      currentPos = 0;
    }
 }
});

.featured-wrapper img{
  max-width:200%;
  max-height:200%;
  min-width:100vw;
}
.featured-wrapper{
  height:500px;
  width:100%;
  overflow:hidden;
}
.things{
  font-size:50px;
  height:500px;
  width:100%;
  background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
  <div class="featured-wrapper" data-parallax="scroll">
      <img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png" alt="">
      <img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png" alt="">
      <img src="https://assets.pokemon.com/static2/_ui/img/account/sign-up.png" alt="">
      <img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
       <img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
      </div>
      <div class="things">I'm the stuff underneath</div>

我的建议是预加载图像，并使用fadeIn/fadeOut的完整事件，而不是setTimeOut。

我希望这能对你有所帮助。

var imagesArray = ["http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png",
                   "http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
                   "https://assets.pokemon.com/static2/_ui/img/account/sign-up.png",
                   "http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png",
                   "http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png"];
function preloadImg(pictureUrls, callback) {
  var i, j, loaded = 0;
  var imagesArray = [];
  for (i = 0, j = pictureUrls.length; i < j; i++) {
    imagesArray.push(new Image());
  }
  for (i = 0, j = pictureUrls.length; i < j; i++) {
    (function (img, src) {
      img.onload = function () {
        if (++loaded == pictureUrls.length && callback) {
          callback(imagesArray);
        }
      };
      img.src = src;
    }(imagesArray[i], pictureUrls[i]));
  }
};
function roll(imagesArray, currentPos, max){
  if (max < 0) {
    return;
  }
  var slide = $('.parallax-mirror').find('img').attr('src', imagesArray[currentPos].src);
  slide.fadeIn(2000, function() {
    slide.fadeOut(1500, function() {
      currentPos++;
      if(currentPos >= imagesArray.length){
        currentPos = 0;
        max--;
      }
      roll(imagesArray, currentPos, max);
    });
  });
}
$(function () {
  preloadImg(imagesArray, function (imagesArray) {
    roll(imagesArray, 0, 3);
  });
});

.parallax-window {
  min-height: 400px;
  position:relative;
}
.ok {
  font-size:50px;
  background:gray;
  color:blue;
  height:500px;
  width:100%;
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window" data-parallax="scroll"
     data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>
<div class="ok">I'm the stuff underneath</div>

视差效果很容易维护，如果你从概念上把它们归结为基本效果。我在你的项目中添加了两行代码，希望能为你提供你想要的结果。我添加的代码是

.featured-wrapper img{ z-index: -1; position: fixed; }

https://jsfiddle.net/simonstern/k4fygvhg/6/

试试这个，希望有帮助..：）

小提琴连杆https://jsfiddle.net/e05m68wd/1/

$(document).ready(function() {
  var imgSrc = ["https://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png", "https://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png", "https://assets.pokemon.com/static2/_ui/img/account/sign-up.png"];
  var counter = 1;
  var duration = 2000;
  var tTime = 300;
  var v = setInterval(function() {
      $('.parallax-mirror').animate({
        'opacity': 0
      }, {
        duration: tTime,
        complete: function() {
          $(this).find('img').attr('src', imgSrc[counter]).end().animate({
            'opacity': 1
          }, tTime);
        }
      });
      if (counter > imgSrc.length - 1) {
        counter = 0
      } else {
        counter++
      };
    },
    duration);
});

.featured-wrapper {
  height: 500px;
  width: 100%;
  overflow: hidden;
}
.things {
  font-size: 50px;
  height: 500px;
  width: 100%;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="featured-wrapper" data-parallax="scroll" data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>
<div class="things">I'm the stuff underneath</div>

相关内容

最新更新

热门标签：