使用jquery和attr(）在img之间切换

Switching between img using jquery and attr()

本文关键字：img 之间 jquery attr 使用      更新时间：2023-09-26

老实说，我不明白它渲染并执行渐变的第一个图像是怎么回事。

如果有人能向我解释我做错了什么，我将不胜感激。

$(document).ready(function() {
  var $text01 = $("#text1");
  var $text02 = $("#text2");
  var $text03 = $("#text3");
  var $text04 = $("#text4");
  var $imgController = $("#img-controller");
  var images = ['https://imagizer.imageshack.us/v2/927x637q90/913/D4xyiG.jpg', 'https://imagizer.imageshack.us/v2/333x250q90/673/qVKDU3.jpg']
  for (var i = 0; i < images.length; i++) {
    if (i + 1 == images.length) {
      $imgController.attr('src', images[i]).fadeOut(4000);
      i = 0;
      $imgController.atrr('src', images[i]).fadeIn(4000);
    } else {
      $imgController.attr('src', images[i]).fadeOut(4000);
      $imgController.attr('src', images[i + 1]).fadeIn(4000);
      i++
    }
  }
})
body {
  color: white;
}
.bg {
  position: fixed !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  img {
    width: 100%;
    height: 100%;
  }
  #text1 {
    position: absolute;
    top: 35%;
    left: 25%;
    font-size: 10em;
    color: $inizio-green;
    p {
      text-shadow: 2px 0px 4px rgba(150, 150, 150, 1);
      -webkit-text-stroke: 1px $primary-color;
    }
  }
  #text2 {
    @extend #text1;
  }
  #text3 {
    @extend #text1;
  }
  #text4 {
    @extend #text1;
  }
}
.container-fluido {
  position: absolute;
  width: 60%;
  top: 20px;
  left: 20%;
  padding: 30px;
  padding-bottom: 0;
  padding-top: 10px;
  background-color: $secondary-color;
  @include opacity(0.7);
}
.img-logo {
  width: 200px;
  height: auto;
  float: left;
  cursor: pointer;
}
.img-background {
  width: 100%;
  height: auto;
}
.menu {
  width: 100%;
  padding-top: 30px;
  li {
    list-style-type: none;
    display: inline;
    padding-left: 40px;
    a {
      text-decoration: none;
      transition: border-bottom linear 0.5s;
      color: $primary-color;
      padding-bottom: 10px;
    }
    a:hover {
      border-bottom: 1px solid $inizio-green;
    }
  }
  li:first-child {
    padding-left: 20%;
  }
}
$primary-color:white;
 $secondary-color:#2A2A2A;
 $inizio-green:#B7C630;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="bg">
  <img id="img-controller" src="https://imagizer.imageshack.us/v2/927x637q90/913/D4xyiG.jpg" />
  <div id="text1">
    <p>ANTONELLO</p>
  </div>
  <div id="text2">
    <p>DONATELLO</p>
  </div>
  <div id="text3">
    <p>BOTTICELLI</p>
  </div>
  <div id="text4">
    <p>GALILEO</p>
  </div>
</div>
<div class="container-fluido">
  <div class="row">
    <div class="navbar">
      <img class="img-logo" src="http://i58.tinypic.com/15mhjq1.png" />
      <ul class="menu">
        <li><a href="#">EMPRESA</a>
        </li>
        <li><a href="#">EMPREENDIMENTOS</a>
        </li>
        <li><a href="#">PORTFÓLIO</a>
        </li>
        <li><a href="#">CONTATO</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
  </div>
</div>
<div>
</div>

代码也在CodePen Playground 上

感谢

这可能会有所帮助。

images.forEach(function(el, index, arr) {
 $imgController.attr('src', images[i]).fadeOut(4000, function(){
    $imgController.attr('src', images[i+1]).fadeIn(4000)
 });
});

这可能是一个假设，但您在寻找循环吗？图像保持不变的原因是foreach在第一个fadeOut发生之前运行，并立即主动更改为数组中的最新图像。您可以使用setInterval使其无限循环：

var i = 1;
setInterval(function(){
    $imgController.fadeOut(2000, function(){
        $imgController.attr('src', images[i]).fadeIn(2000, function(){
            i++;
            if(i > (images.length - 1)){
                i = 0;
            }
        });
    });
}, 6000);

下面是一个例子：DEMO

如果我离基地很远，请告诉我你想要这个环。希望这能有所帮助！

相关文章：