我想在不使用 JQuery 的情况下顺利地更改背景图像,因为我对 jQuery 一无所知,而且我想通过使用 javascript 来学习它。 所以,我只通过 javascript 在 1 秒内完成了图像变化,但我不明白我能做什么才能让图像平滑地变化,如淡入、滑动等。 所以这是我的代码
var index = 0,
container = document.getElementById("Imagebackground");
function autochange() {
var image = ['http://placekitten.com/1000/600', 'http://placekitten.com/1024/620', 'http://placekitten.com/960/600'];
container.style.backgroundImage = 'url(' + image[index++] + ')';
if (index > 2) {
index = 0;
}
}
window.setInterval(autochange, 1000);
#Imagebackground {
width: 100vw;
background-image: url("http://placekitten.com/1000/590");
background-size: cover;
height: 80vh;
}
<div id="Imagebackground"></div>
最佳答案
试试这个,这是纯 javascript 代码
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
<div class="bannar">
<img class="slides" src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg" />
<img class="slides" src="http://css3.bradshawenterprises.com/images/Turtle.jpg" />
<img class="slides" src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
</div>
这是您放置所有要滑动的图像的地方。
<div class="bannar">
<img class="slides" src="images/bannar1.jpg">
<img class="slides" src="images/bannar2.jpg">
<img class="slides" src="images/bannar3.jpg">
</div
关于javascript - 通过纯 javascript 平滑地更改图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40234519/