Question

以下是我正在使用的代码：http://plnkr.co/edit/qfL6mg3bUGYxX70dx1WV?p=preview

我试图弄清楚当用户将鼠标悬停在大滑块图像上时如何暂停幻灯片显示，如果用户点击缩略图，我如何添加“选定”类，如第一张图片蓝色边框有吗？

这是html：

<div id="slider-container">
      <ul class="slider">
          <li>
              <img src="http://placehold.it/350x150&text=1">
              <div class="img-caption">
                  <h2>Test1</h2>
                  <p>Test 1 text</p>
              </div>
          </li>
          <li>
            <img src="http://placehold.it/350x150&text=2">
            <div class="img-caption">
                  <h2>Test2</h2>
                  <p>Test 2 text</p>
              </div>
          </li>
          <li>
              <img src="http://placehold.it/350x150&text=3">
              <div class="img-caption">
                  <h2>Test3</h2>
                  <p>Test 3 text</p>
              </div>
          </li>
          <li>
              <img src="http://placehold.it/350x150&text=4">
              <div class="img-caption">
                  <h2>Test4</h2>
                  <p>Test 4 text</p>
              </div>
          </li>
      </ul>
      <!--/main slider slider-->

      <!-- thumb navigation slider -->
      <div id="slider-thumbs">
          <!-- thumb navigation slider items -->
          <ul class="list-inline">
            <li> <a class="selected">
              <img src="http://placehold.it/50x50&text=1">
            </a></li>
            <li> <a>
              <img src="http://placehold.it/50x50&text=2">
            </a></li>
            <li> <a>
              <img src="http://placehold.it/50x50&text=3">
            </a></li>
            <li> <a>
              <img src="http://placehold.it/50x50&text=4">
            </a></li>
          </ul>
      </div>
  </div>

CSS：

#slider-container {
    float: left;
}
.slider {
    position: relative;
    overflow: hidden;
    margin: 0px;
    padding: 0;
}
.slider li {
    display: none;
    top: 0; 
    left: 0;
    list-style: none;
}
.img-caption {
    background-color: #e3e4e4;
    opacity: 0.8;
    margin-top: -100px;
    padding: 0px 0 0px 15px;
}
.img-caption h2 {
    font-size: 28px;
    text-transform: uppercase;
    padding-top: 10px;
}
.img-caption p {
    font-size: 14px;
    margin-top: -20px;
    padding-bottom: 10px;
}
.list-inline {
    padding-left: 0;
    list-style: none;
}
.list-inline>li {
    display: inline-block;
    padding-left: 1px;
    padding-right: 1px;
}
.selected img {
    border: 3px #0084d9 solid;
}
#slider-thumbs {
    margin-top: -20px;
}

和JS：

jQuery(function($) { 

  var $slider = $('.slider');
  var $slide = 'li';
  var $transition_time = 0;
  var $time_between_slides = 4000;

  function slides(){
    return $slider.find($slide);
  }

  slides().fadeOut();


  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);


      if (slides().length == $i + 1) $i = -1;

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 

  );

});

如果您有任何问题，请在投票前通知我。我会尽力澄清。 THX

Answer 1

我用过：

 $(".slider").hover(callback,callback)

现在您可以暂停滑块。

http://plnkr.co/edit/Qe3qq6v5g2FU3dVerUMc?p=preview

编辑：现在一切正常（使用一些基本的Jquery函数）。

Answer 2

这应该做：http://plnkr.co/edit/X2I1AFo2O1KOnnnBMiUg?p=preview

在幻灯片激活时选择了拇指。
选择用户点击拇指并激活相同的幻灯片。

悬停时没有动作。（Thom-x的answer）

$（“＃slider-thumbs li a”）。点击（function（）{

    var $i = $slider.find($slide + '.active').index();

    slides().eq($i).removeClass('active');

    slides().eq($i).fadeOut($transition_time);

    var $j = $thumbs.find('li a.selected').parent().index();
    thumbslist().eq($j).removeClass('selected');

    $j = $(this).parent().index();
    slides().eq($j).fadeIn($transition_time);
    slides().eq($j).addClass('active');

    $(this).addClass("selected");
  });

使用jQuery添加悬停和缩略图支持

2 个答案: