我是开发新手,所以请对我宽容一点:)
我已经开始在我的电子商务平台上创建一个身体背景滑块,我希望它最终能够在一系列身体背景图像中切换(目前还没有实现)。
我已经设法创建了一个页面,通过删除和添加类来切换"上一个"one_answers"下一个"按钮的身体背景图像,但交叉扫描不起作用,请参阅下面:
https://zoeyplayground-com.zoeysite.com/lookbook
这是我的代码:
HTML
<script>
jQuery(document).ready(function() {
jQuery(".next").click(function() {
jQuery("body").removeClass("bodybackground1").fadeOut('slow');
jQuery("body").addClass("bodybackground2").fadeIn('slow');
});
});
</script>
<script>
jQuery(document).ready(function() {
jQuery(".back").click(function() {
jQuery("body").removeClass("bodybackground2").fadeOut('slow');
jQuery("body").addClass("bodybackground1").fadeIn('slow');
});
});
</script>
<div id="toggle" width="100%">
<img src="/media/import/back.png" class="back">
<img src="/media/import/next.png" class="next">
</div>
CSS
.bodybackground1 {
background: url('/media/import/background1.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}
.bodybackground2 {
background: url('/media/import/background2.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}
#toggle img {
margin-top: 400px;
display: inline;
}
#toggle .next {
float: right;
}
#toggle img:hover {
cursor: pointer;
opacity: 0.8;
}
有人能解释一下为什么褪色不起作用吗?欢迎提供任何指导或建议。非常感谢。
您就快到了。.bodybackground*
类上的transition: all 0.5s;
应该注意渐变效果。只有一个问题,这个#pix-fe
代码正在覆盖您的转换属性。
#pix-fe {
...
transition: opacity .2s ease;
...
}
你应该检查一下。一个快速的解决方法是在你的css中做以下操作:
#pix-fe.bodybackground1 {
background: url('/media/import/background1.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}
#pix-fe.bodybackground2 {
background: url('/media/import/background2.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}