jQuery - 将旋转背景图像与当前幻灯片指示器同步 - jQuery - Sync Rotating Background-Image With Current Slide Indicator 小贝子编程网

我正在使用一个简单的jQuery脚本在我的刊头上实现旋转的背景图像。我想修改我当前的 jQuery 脚本，将每个背景图像同步到页面底部当前幻灯片指示器中的相应项目符号图标。

我知道最简单的解决方案是使用旋转横幅/轮播插件，但我需要完全控制样式和行为。覆盖插件的 CSS 并重组我的内容可能比扩展我已经工作的内容更耗时。

我在下面发布了我的代码的工作示例。我将非常感谢有关此问题的任何帮助。提前感谢！

$(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="#">&bull;</a></li>
<li class="bullet"><a id="banner-two" href="#">&bull;</a></li>
<li class="bullet"><a id="banner-three" href="#">&bull;</a></li>
<li class="bullet"><a id="banner-four" href="#">&bull;</a></li>
<li class="bullet"><a id="banner-five" href="#">&bull;</a></li>
</ul>
</div>
<div id="banner-image"></div>
</div>
</body>

在图像切换后使用此行突出显示项目符号

$(".banner-controls  a").removeClass("current").eq(index).addClass("current");

这是在单击项目符号时更改图像

$(".banner-controls  a").click(function() {
currImg = $(this).parent().index();
console.log(currImg);
changeImg();
});

例：

$(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() {
var index = currImg++ % preloadArr.length;
$(this).css('background', 'url(' + preloadArr[index].src + ') top center no-repeat');
$(".banner-controls  a").removeClass("current").eq(index).addClass("current");
}).animate({
opacity: 1
}, 500);
}
$(".banner-controls  a").click(function() {
clearInterval(intID);
currImg = $(this).parent().index();
changeImg();
});
});

#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="#" class="current">&bull;</a></li>
<li class="bullet"><a id="banner-two" href="#">&bull;</a></li>
<li class="bullet"><a id="banner-three" href="#">&bull;</a></li>
<li class="bullet"><a id="banner-four" href="#">&bull;</a></li>
<li class="bullet"><a id="banner-five" href="#">&bull;</a></li>
</ul>
</div>
<div id="banner-image"></div>
</div>
</body>

覆盖插件的 CSS 并重组我的内容可能是比扩展我已经工作的内容更耗时。

请参阅如何仅使用 CSS 制作图片轮播？

重组我的内容可能比扩展我已经工作的内容。

您可以使用在选择器上调用.hover().bulletchangeImg设置为mouseenter的处理程序，将.finish()链到$('#banner-image')以完成以前的动画

$(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;
$(".bullet").hover(changeImg);
function changeImg() {
$('#banner-image').finish().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="#">&bull;</a></li>
<li class="bullet"><a id="banner-two" href="#">&bull;</a></li>
<li class="bullet"><a id="banner-three" href="#">&bull;</a></li>
<li class="bullet"><a id="banner-four" href="#">&bull;</a></li>
<li class="bullet"><a id="banner-five" href="#">&bull;</a></li>
</ul>
</div>
<div id="banner-image"></div>
</div>
</body>

jQuery - 将旋转背景图像与当前幻灯片指示器同步

相关内容

最新更新

热门标签：