我做这个简短。我在这里看了几个与此相关但没有好处的主题。这是代码; CSS,JS,HTML。我需要和无限循环,并认为我已经使用第一个JS脚本实现了一个。
$(document).ready(function() {
fadeLength = 2,
fadeDelay = 6,
fadeTime = fadeLength * 2000,
delayTime = fadeDelay * 6000,
totalTime = fadeTime delayTime,
allElems,
elemNoFade,
i,
fadingElem;
for (i = 0, allElems = $('.toBeFaded').length, elemNoFade = allElems - 1; i < allElems; i = 1) {
fadingElem = "#elem" + i;
if (i === 0) {
$(fadingElem).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
} else if (i === elemNoFade) {
$(fadingElem).delay(totalTime * i).fadeIn(fadeTime);
} else {
$(fadingElem).delay(totalTime * i).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
}
};
});
//Thought the above would give me the infinite loop.
$(document).ready(function() {
$("#elem0").fadeIn(2000).delay(4000).fadeOut(1000);
$("#elem1").delay(6000).fadeIn(2000).delay(4000).fadeOut(1000);
$("#elem3").delay(12000).fadeIn(2000).delay(4000).fadeOut(1000);
$("#elem4").delay(18000).fadeIn(2000).delay(4000).fadeOut(1000);
$("#elem5").delay(24000).fadeIn(2000).delay(4000).fadeOut(1000);
});
&#13;
.toBeFaded {
position:absolute;
top:12%;
left:30%;
max-width:100%;
height:640px;
display:none;
}
.image-box {
max-width:480px;
height:640px;
background:rgb(240,240,255);
-webkit-box-shadow:12px -3px 12px #000,0 0 15px #666 inset;
box-shadow:12px -3px 12px #000,0 0 15px #666 inset;
margin:4.2% 0 0 29.3%;
border:8px double #000;
overflow:hidden;
}
&#13;
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Beta ttc1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./assets/styles/css/ttc-main.css">
<!--//SCRIPTS BEGIN\\-->
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="./assets/javascript/pacs.fade.gal.js"></script>
<script src="./assets/javascript/fadein.out.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Tamtam's Closet</h1>
<div class="image-box">
<img id="elem0" src="image170.jpg" class="toBeFaded" alt="">
<img id="elem1" src="image176.jpg" class="toBeFaded" alt="">
<img id="elem2" src="image175.jpg" class="toBeFaded" alt="">
<img id="elem3" src="image172.jpg" class="toBeFaded" alt="">
<img id="elem4" src="image173.jpg" class="toBeFaded" alt="">
<img id="elem5" src="image174.jpg" class="toBeFaded" alt="">
</div>
<h4><small><small><a href="https//tamtamsclosetcom1.ipage.com"></a>
</div>
</body>
</html>
&#13;