gpt4 book ai didi

javascript - 使图像轮播平滑淡入淡出

转载 作者:行者123 更新时间:2023-11-30 14:57:08 25 4
gpt4 key购买 nike

我正在处理图像轮播,一切都很好,但图像之间的淡入淡出不是我想要的。我想要一个平滑的淡入淡出。现在他们跳了,你可以在下面的代码中看到。怎样才能让它更流畅?

$.fn.slider = function() {
var $this = this;
var $controls = $this.nextAll('.controls').first();
var index;

$this.find('li:gt(0)').hide();
setInterval(function() {
$this.find('li:first-child').fadeOut(2000)
.next('li').fadeIn(3000)
.end().appendTo($this);
var index = $this.find('li:first-child').data('index');
$controls.find('li.active').removeClass('active');
$controls.find('li').eq(index).addClass('active');
},
4000);
};

$('#slider1').slider();
#slider1 {
position: absolute;
background-color: #5A6D77;
top: 0px;
left: 180px;
height: 449px;
width: 195px;
z-index: 0;
padding: 0;
}

#slider1 img {
width: 100%;
height: 100%;
z-index: 0;
}

ul {
list-style: none;
position: absolute;
}

.images-list {
position: absolute;
}

.images-list>li {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slider1" class="images-list">
<li data-index="0"><img src="https://www.trustedclothes.com/blog/wp-content/uploads/2016/06/bill_gordon_shares_his_spraying_tips.jpg" alt=""> </li>
<li data-index="1"><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt=""></li>
<li data-index="2"><img src="https://static.pexels.com/photos/172292/pexels-photo-172292.jpeg" alt=""></li>
<li data-index="3"><img src="https://www.alternet.org/sites/default/files/styles/story_image/public/story_images/plastic.png?itok=8_NKVjx4" alt=""></li>
</ul>

View on JSFiddle

最佳答案

我想我已经足够流畅了,希望对您有所帮助。因此,您需要对 css 进行以下更改:

.images-list > li {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
-o-transition: 0s;
}

和 jquery 的变化:

  $this.find('li:gt(0)').hide();
setInterval(function () {
$this.find('li:first-child').fadeOut(4000)
.next('li').fadeIn(4000)
.end().appendTo($this);
var index = $this.find('li:first-child').data('index');
$controls.find('li.active').removeClass('active');
$controls.find('li').eq(index).addClass('active');
},
4000);
};

希望对你有帮助,如果没有的话会想出下一步

关于javascript - 使图像轮播平滑淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47080701/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com