javascript - 在窄显示屏上查看时删除 .mouseenter

Question

我是 Jquery 和 JS 的新手，所以希望有人能够提供帮助!我已经构建了我的第一个图像 slider ，除了手持设备之外，它都运行良好。基本上，当宽度降至某个点以下时，幻灯片会重叠，但是当我将鼠标悬停在上方时，而不是能够单击幻灯片上的链接，则会显示最后一张幻灯片。

我很确定最简单的解决方法是删除小屏幕上的 .mouseenter 函数。我尝试过:

$(function(){
var mobile;
if (window.width < 481) {
mobile = 1;
}
if (!mobile) {  

但这似乎没有任何作用。任何有关如何解决此问题的建议或帮助将不胜感激

完整的slidenav.js

    // Run the following code once the window has loaded all elements

$(window).load(function(){

    // Set variables to hide background divs and set opacity of foreground divs to 0 (these won't run yet)

    var hideSlide1 = function(){ $('#slidenavimg1').animate({'opacity':'0'},500); $('.button-one').animate({'opacity':'0'},300); };
    var hideSlide2 = function(){ $('#slidenavimg2').animate({'opacity':'0'},500); $('.button-two').animate({'opacity':'0'},300); };
    var hideSlide3 = function(){ $('#slidenavimg3').animate({'opacity':'0'},500); $('.button-three').animate({'opacity':'0'},300); };
    var hideSlide4 = function(){ $('#slidenavimg4').animate({'opacity':'0'},500); $('.button-four').animate({'opacity':'0'},300); };
    var hideSlide5 = function(){ $('#slidenavimg5').animate({'opacity':'0'},500); $('.button-five').animate({'opacity':'0'},300); };

    // Set variables to show background divs and set opacity of foreground divs to 1 (these won't run yet)

    var showSlide1 = function(){ $('#slidenavimg1').animate({'opacity':'1'},500); $('.button-one').animate({'opacity':'1'},300); };
    var showSlide2 = function(){ $('#slidenavimg2').animate({'opacity':'1'},500); $('.button-two').animate({'opacity':'1'},300); };
    var showSlide3 = function(){ $('#slidenavimg3').animate({'opacity':'1'},500); $('.button-three').animate({'opacity':'1'},300); };
    var showSlide4 = function(){ $('#slidenavimg4').animate({'opacity':'1'},500); $('.button-four').animate({'opacity':'1'},300); };
    var showSlide5 = function(){ $('#slidenavimg5').animate({'opacity':'1'},500); $('.button-five').animate({'opacity':'1'},300); };

    // Run the functions to hide 2nd and 3rd divs

    hideSlide2();
    hideSlide3();
    hideSlide4();
    hideSlide5();

    var blockOne = function(){
            showSlide1();
            hideSlide2();
            hideSlide3();
            hideSlide4();
            hideSlide5();
    };

    var blockTwo = function(){
            showSlide2();
            hideSlide1();
            hideSlide3();
            hideSlide4();
            hideSlide5();
    };

    var blockThree = function(){
            showSlide3();
            hideSlide1();
            hideSlide2();
            hideSlide4();
            hideSlide5();

    };

    var blockFour = function(){
            showSlide4();
            hideSlide1();
            hideSlide2();
            hideSlide3();
            hideSlide5();

    };

    var blockFive = function(){
            showSlide5();
            hideSlide1();
            hideSlide2();
            hideSlide3();
            hideSlide4();

    };

    var hcD1;
    var hcD2;
    var hcD3;
    var hcD4;
    var hcV1;
    var hcV2;
    var hcV3;
    var hcV4;
    var hcH1;
    var hcH2;
    var hcH3;
    var hcH4;
    var hcM1;
    var hcM2;
    var hcM3;
    var hcM4;
    var hcB1;
    var hcC1;
    var hcD1;
    var hcE1;


    function hcIconLoop(){

                blockOne();
                hcT1= window.setTimeout(function() {
                    blockTwo();
                }, 5000);
                hcT2= window.setTimeout(function() {
                        blockThree();
                }, 10000);
                hcT3= window.setTimeout(function() {
                        blockFour();
                }, 15000);
                hcT4= window.setTimeout(function() {
                        blockFive();
                }, 20000);


        };

    function hcIconLoopB(){

                blockTwo();
                hcD1= window.setTimeout(function() {
                    blockThree();
                }, 5000);
                hcD2= window.setTimeout(function() {
                        blockFour();
                }, 10000);

                hcD3= window.setTimeout(function() {
                        blockFive();
                }, 15000);

                hcD4= window.setTimeout(function() {
                        blockOne();
                }, 20000);

        };

    function hcIconLoopC(){

                blockThree();
                hcV1= window.setTimeout(function() {
                    blockFour();
                }, 5000);
                hcV2= window.setTimeout(function() {
                        blockFive();
                }, 10000);
                hcV3= window.setTimeout(function() {
                        blockOne();
                }, 15000);
                hcV4= window.setTimeout(function() {
                        blockTwo();
                }, 20000);

        };


            function hcIconLoopD(){

                blockFour();
                hcH1= window.setTimeout(function() {
                    blockFive();
                }, 5000);
                hcH2= window.setTimeout(function() {
                        blockOne();
                }, 10000);
                hcH3= window.setTimeout(function() {
                        blockTwo();
                }, 15000);
                hcH4= window.setTimeout(function() {
                        blockThree();
                }, 20000);

        };


            function hcIconLoopE(){

                blockFive();
                hcM1= window.setTimeout(function() {
                    blockOne();
                }, 5000);
                hcM2= window.setTimeout(function() {
                        blockTwo();
                }, 10000);
                hcM3= window.setTimeout(function() {
                        blockThree();
                }, 15000);
                hcM4= window.setTimeout(function() {
                        blockFour();
                }, 20000);

        };





        hcIconLoop();

        hcI1= window.setInterval(hcIconLoop, 25000);

        function hcEndLoop(){
            window.clearTimeout(hcT1);
            window.clearTimeout(hcT2);
            window.clearTimeout(hcT3);
            window.clearTimeout(hcT4);
            window.clearInterval(hcI1);
        }

        function hcEndLoop2() {
            window.clearTimeout(hcD1);
            window.clearTimeout(hcD2);
            window.clearTimeout(hcD3);
            window.clearTimeout(hcD4);
            window.clearInterval(hcB1);
        }

        function hcEndLoop3() {
            window.clearTimeout(hcV1);
            window.clearTimeout(hcV2);
            window.clearTimeout(hcV3);
            window.clearTimeout(hcV4);
            window.clearInterval(hcC1);
        }

        function hcEndLoop4() {
            window.clearTimeout(hcH1);
            window.clearTimeout(hcH2);
            window.clearTimeout(hcH3);
            window.clearTimeout(hcH4);
            window.clearInterval(hcD1);
        }

        function hcEndLoop5() {
            window.clearTimeout(hcM1);
            window.clearTimeout(hcM2);
            window.clearTimeout(hcM3);
            window.clearTimeout(hcM4);
            window.clearInterval(hcE1);
        }

    $(function(){
var mobile;
if (window.width < 481) {
mobile = 1;
}
if (!mobile) {  




        $('.button-one').mouseenter(function(){
            $('.imgcont li').stop();
            $('.cta li').stop();
        blockOne();
        hcEndLoop();
        hcEndLoop2();
        hcEndLoop3();
        hcEndLoop4();
        hcEndLoop5();

    });

    $('.button-two').mouseenter(function(){
        $('.imgcont li').stop();
            $('.cta li').stop();
        blockTwo();
        hcEndLoop();
        hcEndLoop2();
        hcEndLoop3();
        hcEndLoop4();
        hcEndLoop5();
    });

    $('.button-three').mouseenter(function(){
        $('.imgcont li').stop();
            $('.cta li').stop();
        blockThree();
        hcEndLoop();
        hcEndLoop2();
        hcEndLoop3();
        hcEndLoop4();
        hcEndLoop5();
    });

    $('.button-four').mouseenter(function(){
        $('.imgcont li').stop();
            $('.cta li').stop();
        blockFour();
        hcEndLoop();
        hcEndLoop2();
        hcEndLoop3();
        hcEndLoop4();
        hcEndLoop5();
    });

    $('.button-five').mouseenter(function(){
        $('.imgcont li').stop();
            $('.cta li').stop();
        blockFive();
        hcEndLoop();
        hcEndLoop2();
        hcEndLoop3();
        hcEndLoop4();
        hcEndLoop5();
    });

    $('.cta').mouseleave(function(){

    if ($('.button-one').css('opacity') == 1) {
            hcIconLoop();
            hcI1= window.setInterval(hcIconLoop, 25000);
    }

    else if ($('.button-two').css('opacity') == 1) {
            hcIconLoopB();
            hcB1= window.setInterval(hcIconLoopB, 25000);
    }

    else if ($('.button-three').css('opacity') == 1) {
            hcIconLoopC();
            hcC1= window.setInterval(hcIconLoopC, 25000);
    }

    else if ($('.button-four').css('opacity') == 1) {
            hcIconLoopD();
            hcD1= window.setInterval(hcIconLoopD, 25000);
    }

    else if ($('.button-five').css('opacity') == 1) {
            hcIconLoopE();
            hcE1= window.setInterval(hcIconLoopE, 25000);
    }

    });




}
});





});

Answer 1

不存在window.width这样的东西。

相反，您必须使用window.innerWidth。如果您使用 jQuery，则可以使用 $(window).width()。