Javascript 选项不起作用的冲击力_Javascript

Javascript 选项不起作用的冲击力

javascript

Javascript 选项不起作用的冲击力,javascript,Javascript,我正在尝试实现冲击滑块：我的最终目标是在另一个冲击滑块中有另一个冲击滑块当我试图设置冲击滑块的选项时，就会出现问题如果没有选项，其工作原理如下所示：代码是： <html> <head> <script type="text/javascript" src="Wallop.js"></script> <link rel="stylesheet" href="wallop.css"> <link re

我正在尝试实现冲击滑块：

我的最终目标是在另一个冲击滑块中有另一个冲击滑块

当我试图设置冲击滑块的

选项时，就会出现问题
如果没有选项，其工作原理如下所示：
代码是：
<html>

<head>
    <script type="text/javascript" src="Wallop.js"></script>
    <link rel="stylesheet" href="wallop.css">
    <link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>

    <div class="Wallop Wallop--slide">
        <div class="Wallop-list">
            <div class="Wallop-item Wallop-item--current">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>
        </div>
    </div>
    <script type="text/javascript">

        var wallopEl = document.querySelector('.Wallop');
        var wallop = new Wallop(wallopEl);


        function onClickNext() {
            wallop.next();
        }

    </script>
</html>

我验证了其他选项是否设置正确，正如您在控制台中看到的那样，因为我只设置了几个选项中的两个
是什么导致了这个问题，我如何命名我的冲击力项目，以便我可以使用另一个内部滑块
更新
正如@HungCao所解释的，这可能是由于CSS规则
但是，在这种情况下，如何创建内部滑块？
这与此处演示的不一样：
代码：

内滑块
var wallopoterel=document.querySelector（'.Wallop-outer'）；
var Wallopoter=新的冲击力（Wallopoterel）；
var wallopinerel=document.querySelector（'.Wallop-inner'）；
var wallopInner=新的冲击力（Wallopinerel）；
函数onClickOuterNext（）{
wallopOuter.next（）；
}
函数onClickInnerNext（）{
wallopInner.next（）；
}
我认为问题在于您的新类覆盖了原始类的一些css规则。
看看这两个街区
没有选择：
<div class="Wallop Wallop--slide">
        <div class="Wallop-list">
            <div class="Wallop-item Wallop-item--current">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>
        </div>
    </div>



有选择：
<div class="Wallop-outer Wallop--slide">
        <div class="Wallop-list">
            <div class="Wallop-outer-item Wallop-outer-item--current">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-outer-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-outer-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>
        </div>
    </div>



你有什么特别的css规则吗？否则，您应该维护他们的css规则。您很可能是对的。然而，要创建一个内部幻灯片，您将如何操作？请查看更新的代码。我需要为每个滑块创建两个不同的CSS规则吗？我仍然不知道您在这里尝试做什么。你的更新代码有什么问题？基本上我想要一个带有3个项目的外部滑块。在其中一个项目中，我需要一个内部滑块来显示另外两个项目。我认为您的html缺少一个结束div，如果您可以创建一个fiddler或plunker，那将是非常棒的。。。
<div class="Wallop Wallop--slide">
        <div class="Wallop-list">
            <div class="Wallop-item Wallop-item--current">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>
        </div>
    </div>

<div class="Wallop-outer Wallop--slide">
        <div class="Wallop-list">
            <div class="Wallop-outer-item Wallop-outer-item--current">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-outer-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-outer-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>
        </div>
    </div>