JS和JQuery脚本冲突

时间：2017-08-05 17:09:52

标签： javascript jquery html css

在我正在设计的网页上为两个函数实现两组代码时，我遇到了问题。我是JS和JQuery的新手，但是没有类似的线程能够找到解决方案。

在我的网页上，我有一系列100vh幻灯片（下面的代码）以及一个全页“欢迎”屏幕。要在它们之间进行转换，我使用提供块滚动的a package。

这是我的代码：

// 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();
});

我可以根据代码中哪个代码块在物理上更高，一次让其中一个代码工作。但是，当块滚动工作时，幻灯片显示会中断，并且该javascript都不会对页面产生任何影响。这应该告诉您，为了每个脚本，满足所有HTML和CSS要求。

解决这个冲突的任何帮助都会很棒，因为这是我在stackoverflow上的第一个问题，如果我屠杀任何有关位置或相关的信息，请告诉我。如果我能提供更多信息，我很乐意这样做。

以下是我所谈论的采样器：

<!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

1 个答案:

答案 0 :(得分：0)

无效，因为show中的showDivs(slideIndex, show);未定义，应该是这样的

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

演示

//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>

相关问题
最新问题