如何解决Javascript淡入淡出图像滑块
我有以下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 举报,一经查实,本站将立刻删除。