如何在滑块悬停时暂停 [英] 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>