Question

我想在不使用JQuery的情况下顺利更改背景图像，因为我对jQuery一无所知，而且我想通过使用javascript来学习它。所以，我只通过javascript在1秒钟内完成图像更改，但我不知道我能做什么，因此图像变得平滑，如淡入，滑动等。所以这是我的代码

＆＃13;

/sth;profile=%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D;source=123;from=333;to=566

＆＃13;

        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);

＆＃13;

#Imagebackground {
  width: 100vw;
  background-image: url("http://placekitten.com/1000/590");
  background-size: cover;
  height: 80vh;
}

＆＃13;

Answer 1

试试这个，这是纯粹的javascript代码

String imgpath ="/mnt/sdcard/joke.png";
String path = new File(imgpath).getParent();

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>

Answer 2

使用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>

通过纯javascript平滑地更改图像

2 个答案: