作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我看过幻灯片,我从那里得到了所有代码,但图像永远不会消失,它们被添加在旧图像之前,这使我的网站超额收费。任何人都知道如何解决它?这是代码:
<style>
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<div class="fadein">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
在此fiddle ,它有效,但在我的网站上,它没有。有帮助吗?
更多信息
编辑
我从同一个网站上获得了另一个幻灯片,但这样我就可以获得多个,并且得到了我想要的东西,除了一件事,淡入有问题,它开始淡出但随后取消并切换到下一张图像。
<style>
.multipleslides { position:relative; height:332px; width:500px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>
<div class="multipleslides">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
<script>
$('.multipleslides').each(function(){
// scope everything for each slideshow
var $this = this;
$('> :gt(0)', $this).hide();
setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 4000);
})
});
</script>
最佳答案
我已经对您的代码进行了一些更新,应该可以修复幻灯片。有一些语法错误,我还让选择器更容易阅读,imo。
$(document).ready(function() {
$('.multipleslides').each(function() {
// scope everything for each slideshow
$(this).children('img').not(":eq(0)").hide();
setInterval(function() {
$(this).children('img').first().fadeOut().next().fadeIn().end().appendTo($(this));
}.bind($(this)), 4000);
});
});
.multipleslides {
position: relative;
height: 332px;
width: 500px;
float: left;
}
.multipleslides>* {
position: absolute;
left: 0;
top: 0;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multipleslides">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
关于javascript - 斯努克幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44844237/
我是一名优秀的程序员,十分优秀!