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和clickers（上一个，下一个）或一个容器创建一个公共ID /类，以确保滑块本身不会中断其他滑块？

例如，使用容器的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

检查我的代码，每个滑块现在都有一个文件就绪的功能，而不是混合物，并且使用了更高版本的jquery。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: