Question

我一直在这里和其他地方一整天都在寻找一种方法来制作一些我最初认为非常简单的工作。我想我终于有了它的工作，但我知道必须有一个更简单的方法。在我的头靠在墙上后，我放弃了我的搜索，只是乞求某人向我展示如何以简单的方式做到这一点。

这就是我需要做的事情。在网站的几个页面上，我有一个“上一页”和“下一页”按钮，交换“div”在我页面的另一部分处于活动状态。无论哪个div在给定时间变为“活动”，都需要给“活动”类以触发其他事件，如视频开始播放，声音效果，动画等。同样的脚本需要能够从任意数量的页面之一调用，“可交换”div的总数将根据页面而改变。如果在“第一个”div激活时按下Previous按钮，或者在“last”div激活时按下Next按钮，则不应采取任何措施。

以下是我的javascript

function swap(what) {
"use strict";
var theDivs = [], i;
$(".PortSwap").each(function() {
    var cid = $(this).attr("id");
    theDivs.push(cid);
});
for (i = 0; i < theDivs.length; i+=1) {
    if ($("#" + theDivs[i]).hasClass('active')) {
        var curDiv = i;
    } 
    $("#" + theDivs[i]).removeClass('active');
    $("#" + theDivs[i]).hide();
}
if (what === 1) {
    if ((curDiv + 1) < theDivs.length){
        $("#" + theDivs[curDiv + 1]).addClass('active');
        $("#" + theDivs[curDiv + 1]).show();
    } else {
        $("#" + theDivs[curDiv]).addClass('active');
        $("#" + theDivs[curDiv]).show();
    }           
} else {
    if ((curDiv - 1) >= 0){
        $("#" + theDivs[curDiv - 1]).addClass('active');
        $("#" + theDivs[curDiv - 1]).show();
    } else {
        $("#" + theDivs[curDiv]).addClass('active');
        $("#" + theDivs[curDiv]).show();
    }
}
}
window.onload = function () {
    "use strict";
    var pDivs = $(".PortSwap"), k;
    for (k = 0; k < pDivs.length; k += 1) {
        if (pDivs[k] !== -1) {
            $(".PortSwap").hide();
        }
    }
    $('#swap0').show();
    $('#swap0').addClass("active"); 
};

以下是我的HTML

 <div id="content">
  <div id="ncholder">
    <div id="ncframe"></div>
    <div class="PortSwap" id="swap0"><img src="img/nvc1.jpg" alt="Web Screen 1"></div>
    <div class="PortSwap" id="swap1"><img src="img/nvc2.jpg" alt="Web Screen 2"></div>
    <div class="PortSwap" id="swap2"><img src="img/nvc3.jpg" alt="Web Screen 3"></div>
  </div>
  <div id="ncnav">
    <img src="img/backward.gif" alt="Previous" onClick="swap(0)">
    <img src="img/forward.gif" alt="Next" onClick="swap(1)">
  </div>
</div>
</div>

我得到的印象是css在这里并不重要，我尝试为此创建一个jsFiddle，但是即使它现在似乎在我的测试服务器上运行，也无法使它工作。

请帮忙！我不是javascript的新手，虽然已经有一段时间了。我是jQuery的新手。提前谢谢！

Answer 1

尝试

<div id="content">
    <div id="ncholder">
        <div id="ncframe"></div>
        <div class="PortSwap" id="swap0">1<img src="img/nvc1.jpg" alt="Web Screen 1"/></div>
        <div class="PortSwap" id="swap1">2<img src="img/nvc2.jpg" alt="Web Screen 2"/></div>
        <div class="PortSwap" id="swap2">3<img src="img/nvc3.jpg" alt="Web Screen 3"/></div>
     </div>
    <div id="ncnav">
        <img src="img/backward.gif" alt="Previous" onClick="prev()"/>
        <img src="img/forward.gif" alt="Next" onClick="next()"/>
    </div>
</div>

JS

$(function(){
    "use strict";
    $('.PortSwap').hide().eq(0).addClass('active').show();
});

function prev(){
    var current = $('.PortSwap.active'), prev = current.prev('.PortSwap');
    console.log(prev.length, prev)
    if(prev.length){
        current.hide().removeClass('active');
        prev.addClass('active').show();
    }
}
function next(){
    var current = $('.PortSwap.active'), next = current.next('.PortSwap');
    if(next.length){
        current.hide().removeClass('active');
        next.addClass('active').show();
    }
}

演示：Fiddle

Answer 2

您的解决方案：

Html代码

<div id="content">
    <div id="ncholder">
        <div id="ncframe"></div>
        <div class="PortSwap" id="swap_0">1<img src="img/nvc1.jpg" alt="Web Screen 1"/></div>
        <div class="PortSwap" id="swap_1">2<img src="img/nvc2.jpg" alt="Web Screen 2"/></div>
        <div class="PortSwap" id="swap_2">3<img src="img/nvc3.jpg" alt="Web Screen 3"/></div>
     </div>
    <div id="ncnav">
        <img src="img/backward.gif" alt="Previous"/>
        <img src="img/forward.gif" alt="Next"/>
    </div>
</div>

仅限jQuery代码：

$(function(){
    //this will hide all elements with the class 'portswap';
    //Recommend you set the style (CSS) of PortSwap to 'display: none',
    //so as to avoid flash of unstyled content;
    $(".PortSwap").not('#swap_0').hide();
    $('#swap_0').addClass("active");

    $('.btn_nav').on('click',function(){
        var activediv = $('.PortSwap.active').first();
        var activediv_id = parseInt(activediv[0].id.split('_')[1]);
        switch(this.id){
            //execute code when backward button is pressed
            case 'btn_backward':
                if(activediv_id-1 >= 0){
                    //previous iteration of div is present, show it
                    activediv.removeClass('active').hide();                                
                    $('#swap_'+(activediv_id-1)).show().addClass('active');
                } else {
                    //No previous div is present, remain on same page.
                }
                break;
            //execute code when forward button is pressed
            case 'btn_forward':
                if(activediv_id+1 < $('.PortSwap').length){
                    //Next iteration of div is present, show it
                    activediv.removeClass('active').hide();                                
                    $('#swap_'+(activediv_id+1)).show().addClass('active');
                } else {
                    //No next div is present, remain on same page.
                }                            
                break;
        }
    }); 
});

注意：经过测试和工作 * DEMO：http://jsfiddle.net/FPhsm/ *

Answer 3

在此轮播演示中，您可以在页面的任何位置放置上一个和下一个控件（请参阅此plunker）。您还可以通过使用轮播选择器在控件上指定自定义属性data-carousel来同时控制多个轮播。

Html （部分代码，请参阅完整演示的plunker）

<div id="my-carousel" class="carousel">
    <div class="buttons">
        <a class="prev" href="#" data-carousel="#my-carousel"><</a>
        <a class="next" href="#" data-carousel="#my-carousel">></a>
    </div>
    <div class="items">
        <div class="item active">Item #1</div>
        <div class="item">Item #2</div>
        <div class="item">Item #3</div>
    </div>
</div>

<强>的Javascript

// executed on document ready
$(function(){

  // get the active item, if it is not the first, set previous as active
  function prev() {
    var $item = $($(this).data('carousel')).find('.item.active');
    if (!$item.is(':first-child')) {
      $item.removeClass('active').prev('.item').addClass('active');
    }
  }

  // get the active item, if it is not the last, set next as active
  function next() {
    var $item = $($(this).data('carousel')).find('.item.active');
    if (!$item.is(':last-child')) {
      $item.removeClass('active').next('.item').addClass('active');
    }
  }

  // bind the controls to the actions
  $('a.prev').on('click', prev);
  $('a.next').on('click', next);

});

<强> CSS

/* make all items hidden by default */
.carousel > .items > .item {
  display: none;
}

/* make active item shown */
.carousel > .items > .item.active {
  display: block;
}

上一个+下一个div交换更好的方式

3 个答案: