javascript - jQuery，单页中的多个内容 slider

Question

我想在单页滚动网站中制作很多幻灯片。一个巧妙的方法是使用来自 Stano 的代码.我的问题是这段代码每页只出现一次。为了让它满足我的需要，我把它变成了 this fiddle .我意识到，如果我有 20 多个这样的代码，这将很快积累成一些相当困惑的代码:

$(document).ready(function() {
    var divs = $('.divs>div');
    var now = 0; // currently shown div
    divs.hide().first().show(); // hide all divs except first
    $(".next").click(function() {
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).show(); // show next
    });
    $(".prev").click(function() {
        divs.eq(now).hide();
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).show(); // show previous
    });
});

有没有办法为 div 和点击器(上一个、下一个)创建通用 ID/类，或者创建一个容器来确保 slider 自行运行而不中断其他 slider ？

例如用容器的ID创建一个变量

var test = $('.container').attr('id') )

在div中实现ID

var divs = $(test).attr( 'id',$(test).attr('id') );

在下一个(和上一个)中实现 ID，这样当它们被点击时它们只会影响具有相同 ID 的 div

$(".next",test).click(function () {...

也许有一个带有特定 ID 的包装器，其中包含 3 个 div(div、prev 和 next)，并告诉脚本它们需要在同一个包装器中才能相互影响。

<div ID="wrap1">
<div class="prev"></div>
<div class="next"></div>
<div class="divs"></div>
</div>

我不知道脚本会如何变化。也许包括 .child() 或 .parent()？

我是 java 脚本的新手，希望我的问题得到正确理解。如果有任何需要澄清的地方，请告诉我。

Answer 1

检查我的代码，每个 slider 现在都有一个文档就绪功能，没有混淆，并且使用了更高版本的 jquery。

$(document).ready(function () {
  function FirstSlider(){
    var divs = $('.div1>div');
    var now = 0; // currently shown div
    console.log(divs);
    divs.hide().first().show(); // hide all divs except first
    $(".nex1").click(function () {
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).show(); // show next
    });
    $(".pre1").click(function () {
        divs.eq(now).hide();
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).show(); // show previous
    });
  }

   function SecondSlider(){
    var divs = $('.div2>div');
    var now = 0; // currently shown div
    divs.hide().first().show(); // hide all divs except first
    $(".nex2").click(function () {
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).show(); // show next
    });
    $(".pre2").click(function () {
        divs.eq(now).hide();
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).show(); // show previous
    });
	}
    FirstSlider();
    SecondSlider();
});

.body {
    margin: 0 0;
}
.prenex {
    position: fixed;
    top:15vh;
    display: block;
    background-color: #aaa;
    cursor: pointer;
    width: auto;
    height: auto;
    font-size: 10vh;
    padding: 2vh 4vh;
    text-align: center;
    opacity: .5;
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
}
.prev, .pre1, .pre2 {
    left:5vh;
    float:left;
}
.next, .nex1, .nex2 {
    right: 5vh;
    float:right;
}
.pre1, .nex1 {
    top:20vh;
}
.pre2, .nex2 {
    top:70vh;
}
.divs, .div1, .div2 {
    width:70vw;
    height:40vh;
    margin: 0 auto;
    display:block;
    background-color:#aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="prenex nex1">></div>
<div class="prenex pre1">
    <</div>
        <div class="div1">
            <div>Hello World,</div>
            <div>I</div>
            <div>Am</div>
            <div>The</div>
            <div>Test</div>
        </div>
        <br>
        <hr>
        <br>
        <div class="prenex nex2">></div>
        <div class="prenex pre2">
            <</div>
                <div class="div2">
                    <div>Hello World,</div>
                    <div>why do I</div>
                    <div>follow</div>
                    <div>the steps of</div>
                    <div>my evil twin?</div>
                </div>