个人中心
gpt4 book ai didi

javascript - JS 和 JQuery 脚本冲突

转载 作者：行者123 更新时间：2023-11-28 03:14:52 26 4
gpt4 key购买 nike

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

在我的网页上，我有一系列 100vh 幻灯片(下面的代码)以及它们上方的一个整页“欢迎”屏幕。为了在它们之间转换，我使用 a package提供 block 滚动。

这是我的代码:

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

根据哪个代码块在脚本中的物理位置更高，我可以让其中一个代码同时运行。但是，当 block 滚动起作用时，幻灯片会中断，并且所有 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

最佳答案

不行，因为 showDivs(slideIndex, show); 中的 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>

关于javascript - JS 和 JQuery 脚本冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45524481/

26 4 0
文章推荐： css - 媒体查询不适用于移动设备
文章推荐： javascript - angular-ui-layout - 调整大小无法在 iframe 中正常工作
文章推荐： CSSTransition 未导入 - 类型无效
文章推荐： c++ - 多个连接更新同一个表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com