我真的不明白发生了什么,它呈现的第一个图像,并做了fadeIn和fadeOut它是错误的。使用jquery和attr切换img()
如果有人可以向我解释我做错了什么,我将不胜感激。
$(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>
谢谢
您需要使用'fadeOut'的回调。 – 2015-03-02 17:48:11
你想解释还是代码已经运行良好? – 2015-03-02 17:48:15
使用.prop()而不是.attr()保持最新状态并稍后避免迁移问题。 – frenchie 2015-03-02 17:56:43