我环顾四周,但没有找到任何东西,请参阅下面的代码。暂停jQuery悬停(鼠标悬停)
考虑到这一点,我只需要能够在鼠标悬停时暂停动画。
感谢您的帮助!
(function ($) {
\t $.fn.textSlider = function (options) {
\t \t /* Default settings */
\t \t var settings = $.extend(
\t \t \t {
\t \t \t \t timeout: 2000,
\t \t \t \t slideTime: 750,
\t \t \t },
\t \t \t options
\t \t);
\t \t var nextItem;
\t \t var currentItem = 0;
\t \t var count = 0;
\t \t this.children('.slider-item').each(
\t \t \t function()
\t \t \t {
\t \t \t \t $(this).addClass('slide-' + (count))
\t \t \t \t \t .css(
\t \t \t \t \t \t {
\t \t \t \t \t \t \t //opacity: \t 0,
\t \t \t \t \t \t \t //paddingTop: \t '100px',
\t \t \t \t \t \t \t //paddingBottom: '0px'
\t \t \t \t \t \t }
\t \t \t \t \t);
\t \t \t \t $(this).hide();
\t \t \t \t count++;
\t \t \t }
\t \t);
\t \t function firstSlide()
\t \t {
\t \t \t $('.slide-' + currentItem).show().animate({
\t \t \t \t //paddingTop: '0px', paddingBottom: '50px',
\t \t \t \t opacity: 1 }, settings.slideTime);
\t \t \t setTimeout (transition, settings.timeout);
\t \t }
\t \t function transition()
\t \t {
\t \t \t nextItem = parseInt (currentItem + 1);
\t \t \t if (nextItem >= count)
\t \t \t \t nextItem = 0;
\t \t \t $('.slide-' + currentItem).animate({
\t \t \t \t //paddingTop: '100px', paddingBottom: '0px',
\t \t \t \t opacity: 0 }, settings.slideTime, function() {
\t \t \t \t \t $(this).hide();
\t \t \t \t \t $('.slide-' + nextItem).show().animate({
\t \t \t \t \t \t //paddingTop: '0px', paddingBottom: '50px',
\t \t \t \t \t \t opacity: 1 }, settings.slideTime);
\t \t \t });
\t \t \t currentItem = nextItem;
\t \t \t setTimeout (transition, settings.timeout);
\t \t }
\t \t return firstSlide();
\t };
}(jQuery));
// Start the Text Slider
\t $('.slide').textSlider({
\t \t timeout: 5000,
\t \t slideTime: 650,
\t \t loop: 1
\t });
/* Main Message & Text */
.main-message {
\t font-size: 150%;
\t font-weight: bold;
\t padding-bottom: 20px;
\t margin-left: 20px;
}
.main-text {
\t font-size: 110%;
\t margin-left: 20px;
}
<!-- Start Text Slider -->
\t \t <div class="slide">
\t \t \t <div class="slider-item">
\t \t \t \t <div class="main-message">Test 1</div>
\t \t \t \t <div class="main-text">Sub text here 1</div>
\t \t \t </div>
\t \t \t <div class="slider-item">
\t \t \t \t <div class="main-message">Test 2</div>
\t \t \t \t <div class="main-text">Sub text here 2</div>
\t \t \t </div>
\t \t \t <div class="slider-item">
\t \t \t \t <div class="main-message">Test 3</div>
\t \t \t \t <div class="main-text">Sub text here 3</div>
\t \t \t </div>
\t \t </div>
\t \t <!-- End Text Slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
谢谢,这工作!我最想添加的最后一件事是在文本底部的子弹导航,以便从一个文本滚动到另一个文本。但是否则这是非常好的:D –
@LuisM非常感谢。对于子弹你需要做出更多的变化:自动播放:开/关,步骤... – gaetanoM
@LuisM对于子弹,你可以采取lokk [纯CSS滑块 - 自动播放,kenburns,prev/next,子弹 - 没有js !](https://codepen.io/hw/pen/biEBz) – gaetanoM