JS和JQuery脚本冲突

Question

I am experiencing issues when implementing two sets of code for two functions on a webpage I am designing. 在要设计的网页上为两个功能实现两组代码时遇到问题。 I am rather new to JS and JQuery, but none of the similar threads lead to a solution. 我对JS和JQuery还是比较陌生，但是没有类似的线程可以提供解决方案。

On my webpage I have a series of 100vh slideshows (code below) as well as one fullpage "welcome"screen above them. 在我的网页上，我有一系列的100vh幻灯片（下面的代码）以及它们上方的一个整页“欢迎”屏幕。 To transition between them, I am using a package that offers block scrolling. 为了在它们之间转换，我使用了提供块滚动的程序包。

Here is my code: 这是我的代码：

// Slideshow code, help from w3schools
var slideIndex = 1;
showDivs(slideIndex, show);

function plusDivs(n, show) {
    showDivs(slideIndex += n, show);
}

function showDivs(n, show) {
    var i;
    var x = document.getElementsByClassName("mySlides"+show);
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "inline";
}


// blockScroller code from the docs on the linked package.
$(function() {
    var blockScroller = $("#main-wrap").blockScroll();
});

I can, depending on which block of code is physically higher up in the script, get one of them to work at a time. 我可以根据脚本中实际位于哪个代码块的上方，让其中一个代码一次工作。 However, when the block scrolling works, the slideshow breaks and none of that javascript has any effect on the page. 但是，当块滚动工作时，幻灯片会中断，并且该javascript都不会对页面产生任何影响。 This should tell you that for the sake of each individual scripts, all HTML and CSS requirements are met. 这应该告诉您，为了每个单独的脚本，都满足所有HTML和CSS要求。

Any help to resolve this conflict would be great, and since this is my first question on stackoverflow if I butchered anything about location or related just tell me. 解决此冲突的任何帮助都将非常有用，因为这是我对stackoverflow的第一个问题，如果我对位置或相关内容一无所知，请告诉我。 If there is any more information I can provide I will gladly do so. 如果有更多我能提供的信息，我会很乐意提供。

Here is a sampler of what I am talking about: 这是我所谈论的采样器：

<!DOCTYPE html>
<html>
<head>

    <!--style>
        .slideshow{
            z-index: 500;
            position: relative;
            height: 100vh;
            width: 100%;
            margin:auto;
            overflow: hidden;
        }

        .slideshow > p{
            position: absolute;
            color: white;
            background-color: black;
            padding: 5px;
            font-size: 24px;
            margin: 0;
        }

        .mySlides1,.mySlides2{
            width: 100%;
            height: 100vh;
            overflow: hidden;
            object-fit: cover;
            object-position: center center;
        }


        .slides_button{
            position: absolute;
            display: inline-block;
            border: none;
            padding:8px 16px;
            cursor: pointer;
            background-color: white;
        }
        .slides_button:hover{
            background-color: black;
            color: white;
        }

        .display_left{
            position: absolute;
            bottom: 50%;
            left: 0%;
        }

        .display_right{
            position: absolute;
            bottom: 50%;
            right: 0;
        }
    </style-->


</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="SCRIPT HERE"></script>        <script>  

$(function () {
var blockScroller = $("#main-wrap").blockScroll();


    $(function () {    
    function showDivs(n, show) {
            var i;
            var x = document.getElementsByClassName("mySlides"+show);
            if (n > x.length) {slideIndex = 1};
            if (n < 1) {slideIndex = x.length};
            for (i = 0; i < x.length; i++) {
               x[i].style.display = "none";
            };
            x[slideIndex-1].style.display = "block";
            console.log(x[slideIndex-1])
        };
        var slideIndex = 1;
        showDivs(2, 1);
        showDivs(2, 2);
        $(function () {
        function plusDivs(n, show) {
            showDivs(slideIndex += n, show);
        };
})
         });
       });
    </script>
    <div id="main-wrap">
        <div style="height:100vh;background-image:url(https://www.planwallpaper.com/static/images/518164-backgrounds.jpg)">
        </div>
        <div class="slideshow">
            <p>slideshow 1</p>
            <img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg">
            <button class="slides_button display_left" onclick="plusDivs(-1,1)">&#10094;</button>
            <button class="slides_button display_right" onclick="plusDivs(1,1)">&#10095;</button>
            <img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg">
            <img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg">
            <img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg">

        </div>
        <div class="slideshow">
            <p>slideshow 2</p>
            <img class="mySlides2" src="https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg">
            <button class="slides_button display_left" onclick="plusDivs(-1,2)">&#10094;</button>
            <button class="slides_button display_right" onclick="plusDivs(1,2)">&#10095;</button>
            <img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/flower_pink_background_vector_art_148632.jpg">
            <img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/clouds_in_sky_background_192377.jpg">
        </div>

    </div>

</body>
</html>

blockerScoll js script blockerScoll js脚本

Answer 1

not work because show in showDivs(slideIndex, show); 不起作用，因为show in showDivs(slideIndex, show); is undefined, it should be like this 未定义，应该是这样

showDivs(slideIndex, 1);
showDivs(slideIndex, 2);

demo 演示

 //This is only for the block scrolling. If you move this //ABOVE the previous section, then it will take over. $(function() { var blockScroller = $("#main-wrap").blockScroll(); }); //This is the slideshow section. Move this above the block scroll //and this works. function showDivs(n, show) { var i; var x = document.getElementsByClassName("mySlides" + show); if(n > x.length) { slideIndex = 1 } if(n < 1) { slideIndex = x.length } for(i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "inline"; //console.log(x[slideIndex - 1]) } var slideIndex = 1; showDivs(slideIndex, 1); showDivs(slideIndex, 2); function plusDivs(n, show) { showDivs(slideIndex += n, show); }

 .slideshow { z-index: 500; position: relative; height: 100vh; width: 100%; margin: auto; overflow: hidden; } .slideshow>p { position: absolute; color: white; background-color: black; padding: 5px; font-size: 24px; margin: 0; } .mySlides1, .mySlides2 { width: 100%; height: 100vh; overflow: hidden; object-fit: cover; object-position: center center; } .slides_button { position: absolute; display: inline-block; border: none; padding: 8px 16px; cursor: pointer; background-color: white; } .slides_button:hover { background-color: black; color: white; } .display_left { position: absolute; bottom: 50%; left: 0%; } .display_right { position: absolute; bottom: 50%; right: 0; }

 <link rel="stylesheet" type="text/css" href="//www.dominikgorecki.com/p/block-scroll/blockScroll.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//www.dominikgorecki.com/p/block-scroll/js/blockScroll.js"></script> <div id="main-wrap"> <div style="height:100vh;background-image:url(https://www.planwallpaper.com/static/images/518164-backgrounds.jpg)"> </div> <div class="slideshow"> <p>slideshow 1</p> <img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg"> <button class="slides_button display_left" onclick="plusDivs(-1,1)">&#10094;</button> <button class="slides_button display_right" onclick="plusDivs(1,1)">&#10095;</button> <img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg"> <img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg"> <img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg"> </div> <div class="slideshow"> <p>slideshow 2</p> <img class="mySlides2" src="https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg"> <button class="slides_button display_left" onclick="plusDivs(-1,2)">&#10094;</button> <button class="slides_button display_right" onclick="plusDivs(1,2)">&#10095;</button> <img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/flower_pink_background_vector_art_148632.jpg"> <img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/clouds_in_sky_background_192377.jpg"> </div> </div>

JS和JQuery脚本冲突

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-08-05 18:27:07

JS和JQuery脚本冲突

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-08-05 18:27:07

解决方案1
0 已采纳 2017-08-05 18:27:07