複数個のスライダーを時間差で動かして回転しているかのように見せる方法

同時にスライドショーを動かしている段階で、次はそれをそれぞれ時間差に動かして回転しているかのように見せたいのですが、どうしたらよろしいでしょうか。考え方を教えていただければと思います。

HTML


		<div class="slideBox">
			<ul class="slideCommon left">
				<li class="item">
					スライド１
				</li>
				<li class="item">
					スライド２
				</li>
				<li class="item">
					スライド３
				</li>
			</ul>
			<ul class="slideCommon center">
				<li class="item">
					スライド１
				</li>
				<li class="item">
					スライド２
				</li>
				<li class="item">
					スライド３
				</li>
			</ul>
			<ul class="slideCommon right">
				<li class="item">
					スライド１
				</li>
				<li class="item">
					スライド２
				</li>
				<li class="item">
					スライド３
				</li>
			</ul>
		</div>

css

* {
  padding: 0;
  margin: 0; }

li {
  list-style: none; }

.slideCommon {
  position: relative; }

.item {
  position: absolute;
  top: 50px;
  opacity: 0;
  transition: 1s; }

.item.show {
  opacity: 1; }

.left .item {
  background-color: red;
  width: 700px;
  height:350px;
  left: 500px; }

.center .item {
  background-color: orange;
  width: 900px;
  height:400px;
  top: 0;
  left: 50%;
  margin-left: -450px;
  z-index: 3; }

.right .item {
  background-color: blue;
  width: 700px;
  height:350px;
  right: 500px; }

jQuery

$( function() {
    $( ".slideCommon" ).each( function() {
        var slideImg = $( this ).find( ".item" );
        var num = slideImg.length;
        var current = 0;
        slideImg.eq( current ).addClass( "show" );
        setInterval( function() {
            slideImg.eq( current ).removeClass( "show" );
            current++;
            if ( current >= num ) {
                current = 0;
            }
            slideImg.eq( current ).addClass( "show" );
        }, 2000 );
    } );
} );

行動規範の内容に同意します

回答4件

「回転しているかのように見せたい」がどういった動きか判断し難いですが、
3枚の画像が順々に入れ替わるということであれば、
スライドの種類もパネルの枚数も丁度3枚なので、currentにslideCommonのインデックスiを
入れてあげると、望んだ動きになるのではないでしょうか。

javascript
1$( function() {
2    $( ".slideCommon" ).each( function(i) {
3        var slideImg = $( this ).find( ".item" );
4        var num = slideImg.length;
5        var current = i;
6        slideImg.eq( current ).addClass( "show" );
7        setInterval( function() {
8            slideImg.eq( current ).removeClass( "show" );
9            current++;
10            if ( current >= num ) {
11                current = 0;
12            }
13            slideImg.eq( current ).addClass( "show" );
14        }, 2000 );
15    } );
16} );

以下、動作サンプル
https://jsfiddle.net/monagano/45mheaa7/2/

投稿2017/06/20 02:53

monagano

総合スコア246

a1291

2017/06/20 03:27

デモまでつけていただきありがとうございます！ちなみにもう少し差をつけたいのですが、それはそれぞれのスライダーにdelayやseTimeoutなどをつければよろしいのでしょうか。 https://www.waxpoetics.jp/ このようにしたいと思っています。

行動規範の内容に同意します

全体的に非効率に見えますが

回転しているかのように見せたい

上記だけの話であればたんにliの順番をずらしておけばいいのではないのでしょうか？

HTML
1<ul class="slideCommon left">
2<li class="item">スライド１</li>
3<li class="item">スライド２</li>
4<li class="item">スライド３</li>
5</ul>
6<ul class="slideCommon center">
7<li class="item">スライド２</li>
8<li class="item">スライド３</li>
9<li class="item">スライド１</li>
10</ul>
11<ul class="slideCommon right">
12<li class="item">スライド３</li>
13<li class="item">スライド１</li>
14<li class="item">スライド２</li>
15</ul>

投稿2017/06/20 02:43

yambejp

総合スコア114825

.each(function( index ) {}) とすれば index を得れるので、中の関数を setTimeout でずらす際に index * 1000 にすればずれていきます。

JavaScript
1$( function() {
2	$( ".slideCommon" ).each( function( index ) {
3		setTimeout( function() {
4			var slideImg = $( this ).find( ".item" );
5			var num = slideImg.length;
6			var current = 0;
7			slideImg.eq( current ).addClass( "show" );
8			setInterval( function() {
9				slideImg.eq( current ).removeClass( "show" );
10				current++;
11				if ( current >= num ) {
12					current = 0;
13				}
14				slideImg.eq( current ).addClass( "show" );
15			}, 2000 );
16		}, 2000 * index ); // indexは0から始まる
17	} );
18} );