Javascript淡入淡出图像滑块

编程问答 2022-06-09

问题描述

我有以下jQuery代码，它们在两张图像之间从100-0％的不透明度淡入淡出。现在，我试图在它们之间添加几个图像。最后，我想在滑块上显示13张不同的图像。

感谢任何帮助。

function fadeImage() {
  var opacity = $("#slider").slider("value");
  $("#old").css("opacity",opacity);
}

$(function() {
  $("#slider").slider({
      range: "max",min: 0,max: 1,value: 0,step: .05,slide: fadeImage,change: fadeImage
    }
  );
});
@import url("//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css");
#timemachine {
  width: 80%;
}

#holder {
  position: relative;
}

#old {
  opacity: 0;
  filter: alpha(opacity=100);
  /* For IE8 and earlier */
}

#new {
  width: 100%;
  overflow: auto;
}

#new img {
  max-width: 100%;
  max-height: 100%;
}

#old img {
  max-width: 100%;
  max-height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
}

#slider {
  width: 90%;
  margin: auto;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div id="timemachine">
  <div id="holder">
    <div id="new">
      <img src="img/bild6-1-interaktivesplanum.jpg" width="469" height="500" />
    </div>
    <div id="old" class="overlay">
      <img src="img/bild6-13-interaktivesplanum.jpg" width="469" height="498" />
    </div>
  </div>
  <div id="slider"></div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fadejavascriptjqueryslider