html - change images smoothly by pure javascript - Stack Overflow

admin管理员组

文章数量:1395777

I want to do change background images smoothly without using JQuery because I don't know anything about jQuery and also I wanna learn it by using javascript. So, I have done only that image changes in 1 second by javascript but I don't understand what can I do so images change smoothly like fading in, sliding, etc. So this is my code

        var index = 0,
          container = document.getElementById("Imagebackground");

        function autochange() {
          var image = ['', '', ''];
          container.style.backgroundImage = 'url(' + image[index++] + ')';
          if (index > 2) {
            index = 0;
          }
        }
        window.setInterval(autochange, 1000);

#Imagebackground {
  width: 100vw;
  background-image: url("");
  background-size: cover;
  height: 80vh;
}

<div id="Imagebackground"></div>

I want to do change background images smoothly without using JQuery because I don't know anything about jQuery and also I wanna learn it by using javascript. So, I have done only that image changes in 1 second by javascript but I don't understand what can I do so images change smoothly like fading in, sliding, etc. So this is my code

        var index = 0,
          container = document.getElementById("Imagebackground");

        function autochange() {
          var image = ['http://placekitten./1000/600', 'http://placekitten./1024/620', 'http://placekitten./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./1000/590");
  background-size: cover;
  height: 80vh;
}

<div id="Imagebackground"></div>

• javascript
• html
• css

Share Improve this question Follow edited Oct 25, 2016 at 8:40 connexo 56.9k1515 gold badges111111 silver badges146146 bronze badges asked Oct 25, 2016 at 8:02 SunnySunny 40244 silver badges1515 bronze badges 6

• Can I know the reason why you down-vote this question? – Sunny Commented Oct 25, 2016 at 8:05
• @Dai, Thanks for taking interest But I don't want to learn jQuery Ok. I wanna do it by using css and javascript only. But I can't figure it out how can I achieve this by javascript. – Sunny Commented Oct 25, 2016 at 8:10
• @Sunny sorry, I misread your posting. – Dai Commented Oct 25, 2016 at 8:10
• 1 I think you are looking for this: css3.bradshawenterprises./cfimg – Zze Commented Oct 25, 2016 at 8:21
• 1 It uses CSS animation and HTML only. Zero JQuery. – Zze Commented Oct 25, 2016 at 8:29

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

Try out this, this is pure javascript code

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./images/Windows%20Logo.jpg" />
    <img class="slides" src="http://css3.bradshawenterprises./images/Turtle.jpg" />
    <img class="slides" src="http://css3.bradshawenterprises./images/Birdman.jpg" />
</div>

And this is where you put all your images that you want to slide.

<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

Use CSS transitions. No javascript required.

If you need further explanation on this code, it can be found here under Demo 3: http://css3.bradshawenterprises./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="https://via.placeholder./150/0000FF/808080" />
  <img class="" src="https://via.placeholder./150/000000/808080" />
  <img class="" src="https://via.placeholder./150/00FFFF/808080" />
  <img class="" src="https://via.placeholder./150/FF00FF/808080" />
</div>

you can just add (.style.transition = "..s") with JavaScript inside the function, it works fine with me

本文标签： htmlchange images smoothly by pure javascriptStack Overflow