jQuery，单页中的多个内容滑块

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 /班一个容器能够确保滑块自身在不中断其他滑块的情况下运行？

例如创建与所述容器

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

在的div

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

实现在未来（和prev）的ID实施ID的ID的变量，所以，当他们被点击，他们只会影响具有相同ID的divs

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

也许有aw具有特定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

检查我的代码，每个滑块现在都有一个文档准备好的功能，不会混淆东西，并且使用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 
 
    }); 
 
\t } 
 
    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>