Question

在我的页面添加图片滑块时，我一直在寻找一些非常奇怪的东西。突然间，我无法用鼠标滚轮滚动页面，滚动箭头工作。

我在codepen上重新创建了一些页面但是它没有问题。现在我想知道我的js文件中是否有错误。

这两个脚本加载在我的html代码的头部，如下所示：

<script type="text/javascript" src="jquery/picture-slider.js"></script>
<script type="text/javascript" src="jquery/sticky.js"></script>

以下是滑块的代码：

$(document).ready(function(){
    var currentIndex = 0,
         items = $('.pictures_container div'),
         itemAmt = items.length;

    function cycleItems() {
        var item = $('.pictures_container div').eq(currentIndex);
        items.hide();
        item.show();
    }

    var autoSlide = setInterval(function() {
        currentIndex += 1;
        if (currentIndex > itemAmt - 1) {
            currentIndex = 0;
        }
        cycleItems();
    }, 4000);

    $('.next').click(function() {
        clearInterval(autoSlide);
        currentIndex += 1;
        if (currentIndex > itemAmt - 1) {
            currentIndex = 0;
        }
        cycleItems();
    });

    $('.prev').click(function() {
        clearInterval(autoSlide);
        currentIndex -= 1;
        if (currentIndex < 0) {
            currentIndex = itemAmt - 1;
        }
        cycleItems();
    });
}

是否有其他方法在不使用$（document）.ready（）的情况下初始化滑块？这可能是我问题的根源吗？我试过把它留下来，但如果没有它，代码就不会运行。 $（window）.ready（）导致了与上述相同的问题。

我已经尝试找到解决这个问题的方法，但是大多数人都希望禁用滚动，这与我愿意找到重新启用它的方法相反（无论是首先禁用它......）。我找到的一个解决方案虽然说明了溢出的地方：需要auto。但是唯一具有溢出属性的元素是.pictures_container，这是必需的，这样图片就不会填满整个页面。

我在W3Schools上找到了滑块的代码，但是我必须稍微更改一下才能将图片放在flexbox中，对齐并对齐居中并以完整的窗口宽度显示。

在codepen上的CSS中，我标记了一个带有注释/ * Content specific * /的部分，其中picture-slider的css样式位于。

我是对的，无论图像是从文件夹还是从URL加载都无关紧要？

我真的很困惑，因为它在codepen上的工作方式正常。任何帮助都将受到高度赞赏。

修改

今天我意识到，它并不总是禁用鼠标滚轮滚动，尤其是当我重新启动浏览器时（btw是Chrome）。但我仍然无法分辨为什么它被禁用或为什么它不会起作用。

由于添加了图片滑块，因此禁用了滚轮滚动

0 个答案: