Question

JS新手在这里。我有一个可能很简单的问题，但是我还无法弄清楚。我不确定该怎么称呼。

我在一个div中有文本，当您将鼠标悬停在它上面时，它将在另一个div中显示图片。这工作正常，但是我希望它在页面加载时自动在图像中滚动。用户将鼠标悬停在文本div之一上后，我希望自动滚动停止。

我有一个Codepen，说明如何在这里设置它：https://codepen.io/johnballman/pen/dwEwRz

HTML：

<div class="app-screen">
  <img src="http://placehold.it/350x150">
</div>
<div id="features">
 <article data-src="http://placehold.it/350x150">Link 1</article>
  <article data-src="http://placehold.it/350x250">Link 2</article>
  <article data-src="http://placehold.it/350x350">Link 3</article>
</div>

CSS：

.app-screen {
  float: left;
  margin-right: 100px;
  display: block;
  width: 350px;
  height: 200px;
  background-color: grey;
  padding-top: 100px;
}

img.active{
    z-index: 2 !important;
    opacity: 1 !important;
  transition:opacity 1s linear;
}

JS：

$("#features article").hover( function() {
    var value=$(this).attr('data-src');
    $(".app-screen img").attr("src", value);
});
$(this).switchClass("", "active", 1000);

任何帮助都会很棒。谢谢。

Answer 1

使用setInterval循环c 当前计数器。
使用++c % tot（其中tot是链接数）来：递增循环计数器。
仅使用类。这样一来，您就可以在单个页面中包含多个.Features元素！
创建show，stop和play函数。 show将显示c图片； stop是停止间隔，play是开始魔术。

/**
 * Features
 * Auto-change articles featured images
 */

$('.Features').each((i, el) => {

  const $this  = $(el);
  const $image = $this.find('.Features-image');
  const $link  = $this.find('.Features-link');
  const tot    = $link.length;
  let c = 0;      // Counter to keep track of Current image
  let itv = null; // Interval loop
  
  const show = () => {
    $image.css({backgroundImage: `url("${$link.eq(c).data().src}")`});
    $link.removeClass('is-active').eq(c).addClass('is-active');
  }
  const stop = () => clearInterval(itv);
  const play = () => itv = setInterval(() => {
      c = ++c % tot; // Preincrement + loop (% = reminder operator)
      show();        // Show c image
    }, 3000);
    
  // Link mouseenter 
  $link.on({
    mouseenter() {
      c = $link.index(this);
      stop(); // Stop ongoing auto-play
      show(); // Show c image 
    },
    mouseleave() {
      play(); // Play on mouseleave
    }
  });
  
  // Init
  show(); // Show c image
  play(); // Start play!

});

/*QuickReset*/ *{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}

/**
 * Features
 * jQuery-handled articles with featured images
 */

.Features {
  display: flex;
  min-height: 200px;
}

.Features-image {
  background: #aaa  50% / cover no-repeat none;
  transition: background 0.5s;
  flex: 0 1 40%;
}

.Features-links {
  display: flex;
  flex: 1;
  flex-flow: column;
}

.Features-link {
  flex: 1;
  padding: 10px;
  transition: background 0.3s;
  border-bottom: 1px solid #ddd;
}

.Features-link:hover,
.Features-link.is-active{
  background: #eee;
}

<div class="Features">
  <div class="Features-image"></div>
  <div class="Features-links">
    <article class="Features-link" data-src="//placehold.it/350x350/0bf">Link 1</article>
    <article class="Features-link" data-src="//placehold.it/350x350/f0b">Link 2</article>
    <article class="Features-link" data-src="//placehold.it/350x350/0fb">Link 3</article>
  </div>
</div>

<div class="Features">
  <div class="Features-image"></div>
  <div class="Features-links">
    <article class="Features-link" data-src="//placehold.it/350x350/28a">Lorem</article>
    <article class="Features-link" data-src="//placehold.it/350x350/a28">Ipsum</article>
    <article class="Features-link" data-src="//placehold.it/350x350/8a2">Dolor</article>
  </div>
</div>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

页面加载时自动滚动图像，悬停时停止

1 个答案: