J'utilise un simple script jQuery pour implémenter une image d'arrière-plan rotative sur ma bannière Masthead. Je voudrais modifier mon script jQuery actuel pour synchroniser chaque image d'arrière-plan avec une icône de puce correspondante dans un indicateur de diapositive en cours en bas de la page.jQuery - Synchronisation de l'arrière-plan de rotation avec l'indicateur de diapositive actuel
Je sais que la solution la plus simple consisterait à utiliser un bandeau rotatif bannière/carrousel, mais j'ai besoin d'un contrôle total sur le style et le comportement. Surcharger le CSS du plugin et restructurer mon contenu pourrait prendre plus de temps que de développer ce que j'ai déjà travaillé.
J'ai posté un exemple de mon code ci-dessous. J'apprécierais grandement toute aide avec ce problème. Merci d'avance!
$(document).ready(function() {
var imgArr = new Array(
'https://unsplash.it/1000/465?image=1',
'https://unsplash.it/1000/465?image=2',
'https://unsplash.it/1000/465?image=3',
'https://unsplash.it/1000/465?image=4',
'https://unsplash.it/1000/465?image=5'
);
var preloadArr = new Array();
var i;
for (i = 0; i < imgArr.length; i++) {
preloadArr[i] = new Image();
preloadArr[i].src = imgArr[i];
}
var currImg = 1;
var intID = setInterval(changeImg, 6000);
function changeImg() {
$('#banner-image').animate({
opacity: 0
}, 500, function() {
$(this).css('background', 'url(' + preloadArr[currImg++ % preloadArr.length].src + ') top center no-repeat');
}).animate({
opacity: 1
}, 500);
}
});#rotating-banner {
background: #fff;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
position: relative height: 465px;
width: 1000px;
margin: 0 auto;
}
.call-to-action {
background: #ccc;
position: absolute;
max-width: 475px;
min-height: 135px;
text-align: center;
padding: 15px;
top: 75px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 5;
}
h2 {
color: #807862;
font-size: 26px;
line-height: 1;
margin-bottom: 5px;
}
p {
font-size: 13px;
}
.banner-controls {
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
z-index: 5;
}
ul {
display: inline-block;
background-color: rgba(0, 0, 0, 0.5);
height: 27px;
line-height: 27px;
width: 107px;
margin: 0 auto;
padding: 0;
border-radius: 5px 5px 0 0;
}
.bullet {
display: inline-block;
font-size: 38px;
}
.bullet a {
text-decoration: none;
color: #fff;
}
.bullet a.current {
color: yellow;
}
#banner-image {
background: url(https://unsplash.it/1000/465?image=1) no-repeat;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="rotating-banner">
<div class="call-to-action">
<h2>Headline to go in This Area Right Here.</h2>
<p>Lorem ipsum dolor sit amet, inceptos lorem adipiscing lacus massa donec egestas, mauris ligula hendrerit dignissim, turpis mauris, in quam voluptatibus, vel at velit vulputate elit sollicitudin ligula.</p>
</div>
<div class="banner-controls">
<ul>
<li class="bullet"><a id="banner-one" href="#">•</a></li>
<li class="bullet"><a id="banner-two" href="#">•</a></li>
<li class="bullet"><a id="banner-three" href="#">•</a></li>
<li class="bullet"><a id="banner-four" href="#">•</a></li>
<li class="bullet"><a id="banner-five" href="#">•</a></li>
</ul>
</div>
<div id="banner-image"></div>
</div>
</body>
fonctionne très bien, mais maintenant je voudrais arrêter la cycle d'animation quand un lien est cliqué. As tu des idées? –
Vous pouvez effacer la minuterie. Vérifiez la réponse mise à jour. – H77