Question

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

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

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

＆＃13;

$(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);
  }
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

$(".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">•</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>

Answer 2

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

请参阅How can I make an image carousel with only CSS?

重构我的内容可能比花费更多时间扩展我已经开始工作的东西。

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

＆＃13;

$(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);
  }
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: