如何在滑块悬停时暂停 [英] How to pause on hover in slider

问题描述

Js

var $slider = $('.slider');var $slide = 'li';var $transition_time = 1000;var $time_between_slides = 4000;功能幻灯片(){返回 $slider.find($slide);}幻灯片().淡出()；幻灯片().first().addClass('active');幻灯片().first().fadeIn($transition_time);$interval = setInterval(功能(){var $i = $slider.find($slide + '.active').index();幻灯片().eq($i).removeClass('active');幻灯片().eq($i).fadeOut($transition_time);if (slides().length == $i + 1) $i = -1;//循环开始幻灯片().eq($i + 1).fadeIn($transition_time);幻灯片().eq($i + 1).addClass('active');}, $transition_time + $time_between_slides);

CSS

.slider { margin: 10px 0;宽度:1024px；高度:500px；位置:相对；溢出:隐藏；}.slider li { 显示:无；位置:绝对；顶部:0；左:0；}

标记

<div class="row"><div class="col-sm-12 col-md-12"><ul class="slider"><li><img src="images/highlights/foundation_transparent.png" alt="第一张幻灯片"><li><img src="images/highlights/nps_timeline_transparent.png" alt="第二张幻灯片"><li><img src="images/highlights/nps_score_transparent.png" alt="第三张幻灯片"><li><img src="images/highlights/startup_bridge_india_pr.png" alt="第四张幻灯片">

</节>

解决方案

在图像上使用 mouseover 和 mouseout 事件来实现这一点.

var $slider = $('.slider');var $slide = 'li';var $transition_time = 1000;var $time_between_slides = 4000;功能幻灯片(){返回 $slider.find($slide);}幻灯片().淡出()；幻灯片().first().addClass('active');幻灯片().first().fadeIn($transition_time);$函数=函数(){var $i = $slider.find($slide + '.active').index();幻灯片().eq($i).removeClass('active');幻灯片().eq($i).fadeOut($transition_time);if (slides().length == $i + 1) $i = -1;//循环开始幻灯片().eq($i + 1).fadeIn($transition_time);幻灯片().eq($i + 1).addClass('active');}$interval = setInterval($function, $transition_time + $time_between_slides );$("img").on("鼠标悬停",function(){clearInterval($interval);});$("img").on("mouseout",function(){$interval = setInterval($function, $transition_time + $time_between_slides );});

.slider { margin: 10px 0;宽度:1024px；高度:500px；位置:相对；溢出:隐藏；} .slider li { 显示:无；位置:绝对；顶部:0；左:0；}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><section id=""><div class="row"><div class="col-sm-12 col-md-12"><ul class="slider"><li><img src="images/highlights/foundation_transparent.png" alt="第一张幻灯片"><li><img src="images/highlights/nps_timeline_transparent.png" alt="第二张幻灯片"><li><img src="images/highlights/nps_score_transparent.png" alt="第三张幻灯片"><li><img src="images/highlights/startup_bridge_india_pr.png" alt="第四张幻灯片">

</section>

Js

var $slider = $('.slider'); 
var $slide = 'li'; 
var $transition_time = 1000;
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; // loop to start

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

CSS

.slider { margin: 10px 0; width: 1024px; height: 500px; position: relative; overflow: hidden; } 
.slider li { display: none; position: absolute; top: 0; left: 0; }

Markup

<section id="">
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul class="slider">
              <li>
                <img src="images/highlights/foundation_transparent.png" alt="First slide">
              </li>
              <li>
                <img src="images/highlights/nps_timeline_transparent.png" alt="Second slide">
              </li>
              <li>
                <img src="images/highlights/nps_score_transparent.png" alt="Third slide">
              </li>
              <li>
                <img src="images/highlights/startup_bridge_india_pr.png" alt="fourth slide">
              </li>
            </ul>
        </div>
    </div>
</section>

解决方案

Use mouseover and mouseout event on image to achieve this.

var $slider = $('.slider'); 
var $slide = 'li'; 
var $transition_time = 1000; 
var $time_between_slides = 4000; 
function slides(){ 
  return $slider.find($slide);
}

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

$function = 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; // loop to start

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

$interval = setInterval($function, $transition_time +  $time_between_slides );

$("img").on("mouseover",function(){
 clearInterval($interval);
});

$("img").on("mouseout",function(){
  $interval = setInterval($function, $transition_time +  $time_between_slides );
});

 

.slider { margin: 10px 0; width: 1024px; height: 500px; position: relative; overflow: hidden; } .slider li { display: none; position: absolute; top: 0; left: 0; }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<section id="">
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul class="slider">
              <li>
                <img src="images/highlights/foundation_transparent.png" alt="First slide">
              </li>
              <li>
                <img src="images/highlights/nps_timeline_transparent.png" alt="Second slide">
              </li>
              <li>
                <img src="images/highlights/nps_score_transparent.png" alt="Third slide">
              </li>
              <li>
                <img src="images/highlights/startup_bridge_india_pr.png" alt="fourth slide">
              </li>
            </ul>
        </div>
    </div>
</section>

这篇关于如何在滑块悬停时暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！