在代码中有一个主div包含图像横幅和textbanner。现在,图像和文本组合都是逐一显示的。在最后一个图像和textbanner之后我想要停止动画,但它再次从第一个图像和textbanner开始显示。我希望在显示第三个textbanner和image.after图像和textbanner动画完成之后停止动画,我想覆盖现在正在加载的div它开始重叠这里是我的代码: 不完美。你可以在这里参考https://codepen.io/anon/pen/RgeYQL HTML
<!DOCTYPE html>
<html>
<head>
<title>Bolierplate banner</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="bolierplate banner">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body >
<div class="imagecontainer" id="pot">
<img src="img/product1.png" class="img1" >
<img src="img/product2.png" class="img2">
<img src="img/product3.png" class="img3">
</div>
<div id="mainContent">
<h2 >SONY</h2>
<div >
<img src="img/img1.jpg" class="imagebanner">
<img src="img/img2.jpg" class="imagebanner">
<img src="img/img3.jpg" class="imagebanner">
<div>
<div class="textbanner">
<!-- <p class="thenew"></p> -->
<h2 class="quotes">THE NEW <p class="greet">ERGONIMICS</p> </h2>
<h2 class="quotes">THE NEW <p class="greet">WORKFLOW</p></h2>
<h2 class="quotes">THE NEW <p class="greet">VERSATALITY</p></h2>
<!-- <h2 class="lastquotes">DISCOVER <p class="greet">THE NEW WORLD OF DOCUMENTARIES</p></h2> -->
<div>
</div>
<script src="js/animation.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>
CSS
@font-face {
font-family: 'MyWebFont';
src: url('fonts/SSTPro-Light.ttf') format('ttf'), /* Pretty Modern Browsers */
url('fonts/SSTPro-Light.woff') format('woff'); }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
body {
line-height: 1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
nav ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: none; }
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
@font-face {}
html {
box-sizing: border-box; }
*,
*:before,
*:after {
box-sizing: inherit; }
body {
font: normal 24px/1.5 Univers;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased; }
#mainContent {
position: relative;
overflow: hidden;
width: 300px;
height: 660px;
border: 1px solid black;
left: 40%;
background-color: #DAA520; }
/* #mainContent div {
position: absolute;*/
}
h2{margin-left: 10px;
}
.quotes{ font-family: 'MyWebFont'; font-size: 60px; margin: 2px; display: none;}
.imagebanner{display: none;}
.greet{ font-family: 'MyWebFont'; font-size: 45px; margin: 2px; line-height: 5px;}
.imagecontainer {
position: absolute;
display: grid;
top: 10px;
right: 250px;
}
.img2{margin-top:15px;margin-bottom: 100px;}
#pot{
position:absolute;
animation:linear;
animation-name: run;
animation-duration: 5s;
z-index: 1;
animation-fill-mode: forwards;
}
@-webkit-keyframes run {
0% { right: 0;}
/* 50%{ right : 50%;}*/
100%{ right: 41%;}
}
JS
(function() {
var img = $(".imagebanner");
var imgIndex = -1;
function showNextImage() {
imgIndex++;
img.eq(imgIndex % img.length)
.fadeIn(400)
.delay(2000)
.fadeOut(400, showNextImage);
// if(img)
// $(this).stop();
}
showNextImage();
})();
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
quoteIndex++;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(400)
.delay(2000)
.fadeOut(400, showNextQuote);
}
showNextQuote();
})();
答案 0 :(得分:0)
我不确定你在问什么,但似乎这可能接近它。希望这有帮助!
var images = $(".imagebanner"),
quotes = $(".quotes");
// Look up 'jquery queue' for more info
function oneByOne(elements) {
elements.each(function() {
var self = $(this);
self.parent().queue(function (n) {
//Do the animations
self.fadeIn(400) // does nothing b/c opacity is already 1
.delay(2000)
.fadeOut(400, n);
});
});
}
// This will make the 1st img and 1st quote dissappear at the same time (likewise for 2nd img and 2nd quote, etc.)
oneByOne(images);
oneByOne(quotes);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<div id="mainContent">
<h1>Images</h1>
<div>
<img src="https://placehold.it/200x200" class="imagebanner">
<img src="https://placehold.it/200x200" class="imagebanner">
<img src="https://placehold.it/200x200" class="imagebanner">
<div>
<div class="textbanner">
<h1>Quotes</h1>
<h2 class="quotes">
Quote 1
</h2>
<h2 class="quotes">
Quote 2
</h2>
<h2 class="quotes">
Quote 3
</h2>
</div>
&#13;