web-dev-qa-db-ja.com

Divを循環する

JQueryを使用していくつかのdivを循環させる必要があります。サイクルとは、一連の7つのdivがあることを意味します。

<div id="content-1">Sample text</div>
<div id="content-2">Sample text</div>
<div id="content-3">Sample text</div>
<div id="content-4">Sample text</div>
<div id="content-5">Sample text</div>
<div id="content-6">Sample text</div>
<div id="content-7">Sample text</div>

私がする必要があるのは、5秒ごとにそれらを変更する必要があるということです。したがって、div「Content-1」は5秒間表示され、次にdiv「Content2」は5秒間表示されます。

これは簡単にできるように感じますが、JavaScriptとjQueryに関しては私はばかです。

jqueryrotation
16
user1163942
var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() { 
    divs.eq(i).fadeIn(400)
              .delay(5000)
              .fadeOut(400, cycle);

    i = ++i % divs.length; // increment i, 
                           //   and reset to 0 when it equals divs.length
})();

デモ：（遅延が短い）http://jsfiddle.net/eFjnU/

フェードアニメーションが必要ない場合は、showとhideを使用します。 delayとコールバックが機能するように、引き続き期間を指定する必要があります。

var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() { 

    divs.eq(i).show(0)
              .delay(1000)
              .hide(0, cycle);

    i = ++i % divs.length;

})();

デモ：（遅延が短い）http://jsfiddle.net/eFjnU/1/

39
user1106925

シンプルなjQueryフェードギャラリーslideshow

ホバー時に一時停止：

// FADESHOW // Simple fade gallery
$(".fadeShow").each(function() {

  var $slides = $(this).children(),
      tot = $slides.length,
      iTV = null,
      idx = 0; 
      
  $slides.eq(idx).show();
  
  function anim() { $slides.fadeOut().eq(++idx % tot).fadeIn(); }
  function play() { iTV = setInterval(anim, 2000); }
  function stop() { clearInterval(iTV); }
  
  $(this).hover(stop, play);
  
  play();
  
});
body{margin:0;}

/* FADESHOW basic CSS */
.fadeShow {
  position:relative;
}
.fadeShow > * {
  position:absolute;
  display:none;
  height: inherit;
  width: 100%;
}

/* FADESHOW (your styles) */
.gal_1 { height:80px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fadeShow gal_1">
  <div style="background:#0bf;">1 Hover to pause</div>
  <div style="background:#fb0;">2 You can have as many slideshows as you want</div>
  <div style="background:#b0f;">3</div>
</div>

<div class="fadeShow">
  <p>LOREM</p>
  <p>IPSUM</p>
  <p>DOLOR</p>
  <p>SOMETHING</p>
</div>

.fadeShow（）jQueryプラグイン

さまざまなフェード値と一時停止値を許可し、他のオプションを含めるために、それをsimpls jQueryプラグインに変換する場合：

// FADESHOW // Simple fade gallery by Roko :)
(function($){
  $.fn.fadeShow = function(options) {

    var op = $.extend({
      pause : 3800,
      fade  : 600,
      pauseHover : true
    }, options);

    return this.each(function() {

      var $slides = $(this).children(),
          tot = $slides.length,
          iTV = null,
          idx = 0; 

      $slides.eq(idx).show();

      function anim() { $slides.fadeOut(op.fade).eq(++idx % tot).fadeIn(op.fade); }
      function play() { iTV = setInterval(anim, op.fade+op.pause); }
      function stop() { clearInterval(iTV); }

      if(op.pauseHover) $(this).hover(stop, play);

      play();

    });
  };
}(jQuery));


// Basic example
$(".gal1").fadeShow();

// With options
$(".gal2").fadeShow({
  pause : 4000,
  fade : 1000,
  pauseHover : false
});
/* FADESHOW basic CSS */
.fadeShow {
  position:relative;
}
.fadeShow > * {
  position:absolute;
  display:none;
  height: inherit;
  width: 100%;
}

/* FADESHOW (your styles) */
.gal1 { height:80px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fadeShow gal1">
  <div style="background:#0bf;">1 Hover to pause</div>
  <div style="background:#fb0;">2 You can have as many slideshows as you want</div>
  <div style="background:#b0f;">3</div>
</div>

<div class="fadeShow gal2">
  <p>pauseHover : false</p>
  <p>IPSUM</p>
  <p>DOLOR</p>
  <p>SOMETHING</p>
</div>
7
Roko C. Buljan

セットを反復処理し、その可視性プロパティを処理する必要があります。

まず、私が作成した2つのライブラリを紹介します。 1つ目はIterableで、これはあらゆる種類の反復を処理するように設計されています。

function Iterable(params) {
    var prevHandlers = [];
    var nextHandlers = [];
    var that = this;
    this.current = params.current;

    function ensureArray() {
        if (!that.elements) {
            that.elements = [];
        } else if (!Array.isArray(that.elements)) {
            that.elements = $.map(that.elements, function(value, index) {
                return [value];
            });
        }
        return that.elements;
    }

    function calculateCount() {
        that.count = ensureArray().length;
    }

    this.setElements = function(elements) {
        this.elements = elements;
        calculateCount();
    };

    this.prev = function(amount) {
        if (amount === undefined) {
            amount = 1;
        }
        //Modulo twice to make sure current will be positive
        that.current = (((that.current - amount) % that.count) + that.count) % that.count;
        while (amount--) {
            for (var prevHandler in prevHandlers) {
                prevHandlers[prevHandler](params);
            }
        }
    };

    this.next = function(amount) {
        if (amount === undefined) {
            amount = 1;
        }
        that.current = (that.current + amount) % that.count;
        while (amount--) {
            for (var nextHandler in nextHandlers) {
                nextHandlers[nextHandler](params);
            }
        }
    };

    this.getCurrent = function() {
        return that.elements[that.current];
    };

    this.setCurrent = function(current) {
        for (var index in that.elements) {
            if (that.elements[index] === current) {
                that.current = index;
                return true;
            }
        }
        return false;
    };

    this.pushElement = function(element) {
        that.elements.Push(element);
    };

    this.pushElements = function(elements) {
        for (var element in elements) {
            that.pushElement(elements[element]);
        }
    };

    this.insertElement = function(element, index) {
        that.elements.splice(index, 0, element);
    };

    this.insertElements = function(elements, indexes, leftToRight) {
        var start = 0;
        var end = indexes.length - 1;
        if (leftToRight === false) {
            var aux = start;
            start = end;
            end = aux;
        }
        var leap = (start < end) ? 1 : -1;
        while (start - leap !== end) {
            that.insertElement[elements[indexes[start]]];
            start += leap;
        }
    };

    this.popElement = function() {
        that.elements.pop();
    };

    this.popElements = function(amount) {
        that.elements.splice(that.elements.length - amount, amount);
    };

    this.removeElement = function(index) {
        that.elements.splice(index, 1);
    };

    this.removeElements = function(indexes, leftToRight) {
        var start = 0;
        var end = indexes.length - 1;
        if (leftToRight === false) {
            var aux = start;
            start = end;
            end = aux;
        }
        var leap = (start < end) ? 1 : -1;
        while (start - leap !== end) {
            that.removeElement(indexes[start]);
            start += leap;
        }
    };

    this.register = {
        prev: function(param) {
            if (Array.isArray(param)) {
                for (var func in param) {
                    prevHandlers.Push(param[func]);
                }
            } else {
                prevHandlers.Push(param);
            }
        }, 
        next: function(param) {
            if (Array.isArray(param)) {
                for (var func in param) {
                    nextHandlers.Push(param[func]);
                }
            } else {
                nextHandlers.Push(param);
            }
        }
    };

    this.setElements(params.elements);
    if ((!!this.current) && (!Array.isArray(params.elements))) {
        this.setCurrent(params.elements[params.current]);
    }

}

2つ目はVisiblaryで、これはあらゆる種類の可視性イベントを処理するように設計されています。

/*
 * params:
 *     - selector: jQuery selector
 *     - init: function which gets the Visiblary object to initialize it
 *     - events: object/array
 *         - root: a selector which contain all the affected tags, default is "body"
 *         - types: array, which contains the string representation of the events
 *         - selector: inner selector to identify the target set
 *         - handler: handler function
 */
function Visiblary(params) {
    var instance = this;
    if (!params.toggleClass) {
        params.toggleClass = "invisible";
    }
    this.hideAll = function() {
        $(params.selector).addClass(params.toggleClass);
        return instance;
    };
    this.hideSubset = function(subsetSelector) {
        $(params.selector).filter(subsetSelector).addClass(params.toggleClass);
        return instance;
    };
    this.hideOnly = function(subsetSelector) {
        $(params.selector).not(subsetSelector).removeClass(params.toggleClass);
        $(params.selector).filter(subsetSelector).addClass(params.toggleClass);
        return instance;
    };
    this.showAll = function() {
        $(params.selector).removeClass(params.toggleClass);
        return instance;
    };
    this.showSubset = function(subsetSelector) {
        $(params.selector).filter(subsetSelector).removeClass(params.toggleClass);
        return instance;
    };
    this.showOnly = function(subsetSelector) {
        $(params.selector).not(subsetSelector).addClass(params.toggleClass);
        $(params.selector).filter(subsetSelector).removeClass(params.toggleClass);
        return instance;
    };
    this.invert = function() {
        $(params.selector).each(function() {
            $(this).hasClass(params.toggleClass) ? $(this).removeClass(params.toggleClass) : $(this).addClass(params.toggleClass);
        });
        return instance;
    };
    if (!!params.init) {
        params.init(this);
    }
    if (!!params.events) {
        for (var event in params.events) {
            $(!!params.events[event].root ? params.events[event].root : "body").on(params.events[event].types.join(" "), params.events[event].selector, params.events[event].handler);
        }
    }
    return instance;
}

そして、これらのツールを使用し、7つの要素がすでに作成されていると仮定すると、これは問題を解決するスクリプトです。

var myVisiblary = new Visiblary({
    selector: "#content-1, #content-2, #content-3, #content-4, #content-5, #content-6, #content-7"
});
myVisiblary.showOnly("#content-1");
var myIterable = new Iterable({
    elements: $("#content-1, #content-2, #content-3, #content-4, #content-5, #content-6, #content-7"),
    current: 0
});
myIterable.register.next(function() {myVisiblary.showOnly($(myIterable.getCurrent()))});
setInterval(function(){ myIterable.next(); }, 5000);
1
Lajos Arpad