通过纯javascript顺利更改图像

我不想使用JQuery来平滑地更改背景图像，因为我对jQuery一无所知，而且我也想通过使用javascript来了解它。所以，我已经做了由JavaScript在1秒内只图像的变化，但我不明白，我能做些什么，所以无论图像平滑地改变像衰落，滑动等所以这是我的代码通过纯javascript顺利更改图像

 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>

来源

2016-10-25 Sunny

我可以知道你为什么低估这个问题吗？ – Sunny

@戴，感谢您的兴趣但我不想学习jQuery Ok。我想只通过使用CSS和JavaScript来做到这一点。但我无法弄清楚如何通过javascript实现这一点。 – Sunny

@孙尼抱歉，我误读你的贴子。 – Dai

使用CSS转换。没有JavaScript要求。

如果您需要在此代码的进一步的解释，它可以在这里下演示3发现：http://css3.bradshawenterprises.com/cfimg/

@-webkit-keyframes cf4FadeInOut { 
 
0% { 
 
    opacity:1; 
 
} 
 
17% { 
 
    opacity:1; 
 
} 
 
25% { 
 
    opacity:0; 
 
} 
 
92% { 
 
    opacity:0; 
 
} 
 
100% { 
 
    opacity:1; 
 
} 
 
} 
 

 
@-moz-keyframes cf4FadeInOut { 
 
0% { 
 
    opacity:1; 
 
} 
 
17% { 
 
    opacity:1; 
 
} 
 
25% { 
 
    opacity:0; 
 
} 
 
92% { 
 
    opacity:0; 
 
} 
 
100% { 
 
    opacity:1; 
 
} 
 
} 
 

 
@-o-keyframes cf4FadeInOut { 
 
0% { 
 
    opacity:1; 
 
} 
 
17% { 
 
    opacity:1; 
 
} 
 
25% { 
 
    opacity:0; 
 
} 
 
92% { 
 
    opacity:0; 
 
} 
 
100% { 
 
    opacity:1; 
 
} 
 
} 
 

 
@keyframes cf4FadeInOut { 
 
0% { 
 
    opacity:1; 
 
} 
 
17% { 
 
    opacity:1; 
 
} 
 
25% { 
 
    opacity:0; 
 
} 
 
92% { 
 
    opacity:0; 
 
} 
 
100% { 
 
    opacity:1; 
 
} 
 
} 
 

 
#example { 
 
    position:relative; 
 
    height:281px; 
 
    width:450px; 
 
    margin:0 auto; 
 
} 
 
#example img { 
 
    position:absolute; 
 
    left:0; 
 
} 
 

 
#example img { 
 
    -webkit-animation-name: cf4FadeInOut; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-duration: 8s; 
 

 
    -moz-animation-name: cf4FadeInOut; 
 
    -moz-animation-timing-function: ease-in-out; 
 
    -moz-animation-iteration-count: infinite; 
 
    -moz-animation-duration: 8s; 
 

 
    -o-animation-name: cf4FadeInOut; 
 
    -o-animation-timing-function: ease-in-out; 
 
    -o-animation-iteration-count: infinite; 
 
    -o-animation-duration: 8s; 
 

 
    animation-name: cf4FadeInOut; 
 
    animation-timing-function: ease-in-out; 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 8s; 
 
} 
 
#example img:nth-of-type(1) { 
 
    -webkit-animation-delay: 6s; 
 
    -moz-animation-delay: 6s; 
 
    -o-animation-delay: 6s; 
 
    animation-delay: 6s; 
 
} 
 
#example img:nth-of-type(2) { 
 
    -webkit-animation-delay: 4s; 
 
    -moz-animation-delay: 4s; 
 
    -o-animation-delay: 4s; 
 
    animation-delay: 4s; 
 
} 
 
#example img:nth-of-type(3) { 
 
    -webkit-animation-delay: 2s; 
 
    -moz-animation-delay: 2s; 
 
    -o-animation-delay: 2s; 
 
    animation-delay: 2s; 
 
} 
 
#example img:nth-of-type(4) { 
 
    -webkit-animation-delay: 0; 
 
    -moz-animation-delay: 0; 
 
    -o-animation-delay: 0; 
 
    animation-delay: 0; 
 
}

<div id="example"> 
 
    <img class="" src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg" /> 
 
    <img class="" src="http://css3.bradshawenterprises.com/images/Turtle.jpg" /> 
 
    <img class="" src="http://css3.bradshawenterprises.com/images/Birdman.jpg" /> 
 
    <img class="" src="http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg" /> 
 
</div>

来源

2016-10-25 08:31:40 Zze

在这种情况下，转换已经足够，并且有更好的浏览器支持 –

您的介绍文本建议使用动画，但您的代码使用转换，而不是动画。显示，他想要根据计时器转换超过两个图像 – connexo

@connexo错误的词 - 固定:) ...我会做一个转换循环 - 只为你。 – Zze

试试这个，这是纯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

来源

2016-10-25 10:46:37

通过纯javascript顺利更改图像

回答

相关问题