Question

嗨，

我正在学习/正在尝试在JS / JQuery中制作自定义滑块，并且已经编写了以下代码。它几乎运行良好，但几乎没有问题。我正在做的是我同时运行两种类型，

每5秒钟使用autoRun（）函数自动运行
每次点击滑动指示器时，带有点击事件的幻灯片都会运行到相关的幻灯片。

在下面的代码中，我遇到了几个问题，，如果您能帮助我，将非常感谢您。

我面临的问题是：

单击滑块指示符时，我想在5秒钟的特定时间内禁用自动运行功能，以使滑块看起来更专业。
当转到上一张幻灯片或返回到第一张幻灯片时，控制台在下面显示错误，并且还需要两倍的时间，例如：10秒钟才能转到下一张幻灯片。

“未捕获的TypeError：无法读取未定义的属性'left'”

$(function () {
    var $mainSliderWrap = $('#slider_main_wrapper')
        , $sliderMain = $mainSliderWrap.find('.main-slider')
        , $sliderchildren = $sliderMain.children('li')
        , $sliderIndicator = $mainSliderWrap.find('.slider-main-indicator');
    // Slider Setup
    window.addEventListener('resize', initMainSlider);
    initMainSlider();
    
    // Slider SetUp function
    function initMainSlider() {
        var wWidth = window.outerWidth
            , sliderMainWidth = wWidth * $sliderchildren.length
        $sliderMain.css('width', sliderMainWidth + 'px');
        $sliderMain.children('li').first().addClass('visible');
        $sliderIndicator.children('li').first().addClass('active');
    }
    // Want to Run Slider on Click event
    $sliderIndicator.on('click', 'li', updateMainSlider);
    // If Click Event Not happenening then I want to auto run Slider after 5 seconds
    autoRun()

    function autoRun() {
        var mainSliderChildLenght = $sliderchildren.length;
        var i = 0;
        var next = true;
        var dir;
        setInterval(function () {
            if (mainSliderChildLenght == i || i < 0) {
                next = !next;
                if (i < 0) {
                    i = 0;
                }
            }
            if (next) {
                dir = 'next';
                i++;
            }
            else {
                dir = 'prev';
                i--;
                if(i < 0) {
                    return
                }
            }
            updateMainSlider(dir);
            $('#result').text(i)
        }, 5000);
    }
    // Here is the function for Updating the Slider
    function updateMainSlider(a) {
        var visibleSlide = $sliderchildren.filter('.visible')
            , actualTranslate = getTranslateValue($sliderMain, 'X');
        if (a == 'next' || a == 'prev') { // inside this if is running when function is called from autoRun()
            console.log(a)
            var newSlide = (a == 'next') ? visibleSlide.next() : visibleSlide.prev()
                , newSlideOffsetLeft = newSlide.offset().left
                , valueToTranslte = -newSlideOffsetLeft + actualTranslate;
            
            setTranslateValue($sliderMain, 'translateX', valueToTranslte);
            
            visibleSlide.removeClass('visible');
            newSlide.addClass('visible');
            $sliderIndicator.children('.active').removeClass('active');
            $sliderIndicator.find('li').eq(newSlide.index()).addClass('active');
        }
        else { // inside this if is running when function is called from click event
            console.log(a)
            var newSlide = $(a.target)
                , $newSlideIndicatorIndex = newSlide.index()
                , $visibleSlideIndex = visibleSlide.index();
            if ($newSlideIndicatorIndex !== $visibleSlideIndex && !$($sliderIndicator).hasClass('disable-click')) {
                $($sliderIndicator).addClass('disable-click');
                setTimeout(function () {
                    $($sliderIndicator).removeClass('disable-click');
                }, 1000);
                var diff = $newSlideIndicatorIndex - $visibleSlideIndex
                    , valueToTranslte = -(diff * window.outerWidth) + actualTranslate;
                
                setTranslateValue($sliderMain, 'translateX', valueToTranslte);
                
                $($sliderchildren[$visibleSlideIndex]).removeClass('visible');
                $($sliderchildren[$newSlideIndicatorIndex]).addClass('visible');
                $sliderIndicator.children('.active').removeClass('active');
                $sliderIndicator.find('li').eq($newSlideIndicatorIndex).addClass('active');
            } // end if
            
        } // end else
    } // end function
    // SetTranslate Value Fucntion
    function setTranslateValue(element, property, value) {
        $(element).css({
            'transform': property + '(' + value + 'px)'
        });
    }
    // Get Translate Value function
    function getTranslateValue(element, axis) {
        var trValue = $(element).css('transform');
        if (trValue !== 'none') {
            trValue = trValue.split(')')[0];
            trValue = trValue.split(',');
            trValue = (axis == 'X') ? trValue[4] : trValue[5];
        }
        else {
            trValue = 0;
        }
        return Number(trValue);
    }
})

        ol {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        body {
            margin: 0;
            padding: 0;
        }
        
        .slider-main-wrapper {
            box-shadow: inset 0 0 20px orange;
            min-height: 100vh;
        }
        
        ol.main-slider {
            height: 85vh;
            box-shadow: inset 0 0 20px green;
            transition: transform 500ms ease;
        }
        
        ol.main-slider > li {
            float: left;
        }
        
        ol.main-slider > li .silder-main-content {
            width: 100vw;
            height: 85vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        ol.main-slider > li.visible .silder-main-content {
            box-shadow: inset 0 0 140px green;
        }
        
        ol.slider-main-indicator {
            height: 15vh;
            display: flex;
        }
        
        ol.slider-main-indicator li {
            box-shadow: inset 0 0 2px green;
            flex: 1;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        
        ol.slider-main-indicator li.active {
            box-shadow: inset 0 0 80px green;
            cursor: default;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result" style="font-size: 30px; position: absolute;
    top: 0; left: 0"></div>
    <div class="slider-main-wrapper" id="slider_main_wrapper">
        <ol class="main-slider">
            <li>
                <div class="silder-main-content">
                    <h1>First Slide</h1>
                </div>
            </li>
            <li>
                <div class="silder-main-content">
                    <h2>Second Slide</h2>
                </div>
            </li>
            <li>
                <div class="silder-main-content">
                    <h1>Third Slide</h1>
                </div>
            </li>
            <li>
                <div class="silder-main-content">
                    <h1>Fourth Slide</h1>
                </div>
            </li>
        </ol>
        <!--end slides-->
        <ol class="slider-main-indicator">
            <li> <span class="text">First Slide</span> </li>
            <li> <span class="text">Second Slide</span> </li>
            <li> <span class="text">Third Slide</span> </li>
            <li> <span class="text">Fourth Slide</span> </li>
        </ol>
        <!--end slide indicator-->
    </div>

Answer 1

您将需要在单击时清除clearInterval，一旦完成由于“ click”事件引起的处理，则再次设置setInterval-因此，首先，您需要将返回的值Before: The @quick @brown^#&*( fox @jumps over @the lazy @dog After : The quick brown fox jumps over the lazy dog保存到在setInterval

中使用这段代码中的

clearInterval返回一个函数，该函数开始间隔

这只是代码的“一部分”，而不是整个代码-尝试使其对我已实现的更改具有可读性

autoRun

您可能仍需要调整一些东西，我没有深入研究您的代码

根据要求

$sliderIndicator.on('click', 'li', updateMainSlider);
// save the function returned by autoRun
var go = autoRun();
// start autoRun
go();
// add a variable to store interval identifier
var interval;
function autoRun() {
    var mainSliderChildLenght = $sliderchildren.length;
    var i = 0;
    var next = true;
    var dir;
    // return a function to begin autoRun for real
    return function() {
        // save interval identifier
        interval = setInterval(function () {
            // your code unchanged
        }, 5000);
    };
}
function updateMainSlider(a) {
    var visibleSlide = $sliderchildren.filter('.visible')
        , actualTranslate = getTranslateValue($sliderMain, 'X');
    if (a == 'next' || a == 'prev') {
        // your code - unchanged
    } else {
        // clear interval
        clearInterval(interval);
        // your code - unchanged
        // now add this to restart the interval
        go();
    }
}

当其他功能正在运行时如何禁用JavaScript功能

1 个答案: