jQueryでスライドショー作成(無限ループ)

質問

jQueryでスライドショーを作成したいです。

仕様としては、進むボタンと戻るボタンがあって、どちらかを押すと、画像が前または後ろにスライドして変わります。

ここまではできるんですが、以下のような無限にループさせることができません。
・最後まで行ったときに、進むボタンを押すと、最初の画像が右から現れてスライドし、最初に戻る。
・最初の画像のときに戻るボタンを押すと、最後の画像が左から現れてスライドし、現在地が最後の画像になる。

具体的には、下記サイトのような挙動にしたいです。
http://www.slidesjs.com/

このようなスライドショーの無限ループは、どのように考えれば実現できるのか、どなたかご教授いただけないでしょうか？

回答No.2

fujillin · ベストアンサー

ちゃんと内容を見ていませんが、ul全体の位置をずらしてスライドさせているのだと思います。

循環して表示できるようになさりたいとのことですが、
現状のままだと、最初と最後の要素を連続させようとすると両方を同時に表示（スライド中の表示）できないので、イニシャライズ時にリストの最後に最初の要素をコピーして追加しておきます。
このようにしておくことで、循環する際に必要な全部の状態をスライド表示することが可能になります。

アニメーション部分を自作している場合は、その処理の中でul要素のオフセット値が範囲内に納まるようにmodをとるようにしておけばあとは気にしなくても良くなります。
ご提示のスクリプトでは、ライブラリを使用してアニメーションなさっているようですので、スタート時の表示要素が最初又はコピーした要素（同じもの）を表示中の場合は、アニメーションを開始する前に、次に移動する方向によって表示するオフセットを切替えるようにしておけばよろしいかと思います。

お礼

正直仰ってること全て理解できたわけではありませんが、何とか実現できました。
ありがとうございました。

回答No.1

tracer

> ここまではできるんですが、以下のような無限にループさせることができません。

出来るというのは、ご自身で実装できるという意味でしょうか？
それともプラグインなど他人の作ったものを使ってできるという意味でしょうか？
ご自身で作れるとというのであれば、それほど難しいことはないと思います。
いずれにしてもソースがないとアドバイスのしようがないと思いますよ。

お礼

すみません。
長過ぎて途中で投稿しちゃったら、編集できなくなっちゃったので、お礼欄にて
javascriptのソースを貼らせていただきます。（cssは貼る必要なかったか・・・）

var $mainVisualContainer = $('#mainVisualContainer');
var $mainVisualWrap = $('#mainVisualWrap');
var $mainVisualWrapUl = $('#mainVisualWrap ul');
var $mainVisualWrapUlLi = $('#mainVisualWrap ul li');
var $carouselIndicatorLi = $('#carouselIndicator li');

var moveDis = 0;//移動距離
var currentNumber = 0;//今何番目にいるか
var imgLen = $('#mainVisualWrap ul li').length;//画像の個数になる
$mainVisualWrapUl.css('width',100*imgLen+'%');
$mainVisualWrapUlLi.css('width',100/imgLen+'%');
$(window).bind('load resize',function(){
moveDis = $mainVisualWrapUlLi.eq(0).width();
console.log(moveDis);
$mainVisualContainer.height(parseInt($mainVisualWrapUlLi.height())+30+'px');
$mainVisualWrap.height(parseInt($mainVisualWrapUlLi.height())+'px');
});

function moveRight(){
$mainVisualWrapUl.stop(true,true).animate({'left': '+='+moveDis+'px'}, 'fast');
currentNumber--;
$carouselIndicatorLi.find('a').removeClass('current');
$carouselIndicatorLi.eq(currentNumber).find('a').addClass('current');
}
function moveLeft(){
$mainVisualWrapUl.stop(true,true).animate({'left': '-='+moveDis+'px'}, 'fast');
currentNumber++;
$carouselIndicatorLi.find('a').removeClass('current');
$carouselIndicatorLi.eq(currentNumber).find('a').addClass('current');
}

$mainVisualContainer.find('.prevBtn a').bind('click',function(){
if(currentNumber > 0){
moveRight();
}
return false;
});
$mainVisualContainer.find('.nextBtn a').bind('click',function(){
if(currentNumber < imgLen-1){
moveLeft();
}
return false;
});

※FirefoxとChromeではちゃんと動くことを確認しました。（IEは全然だめです。それはまた後で考えます。）
※今は、「前へ」と「次へ」のボタンは、それぞれ最初の画像に居る時と最後の画像に居る時は押せないようにしています。本当は掲題のとおり、無限ループさせたいです。

長々と申し訳ないですが、アドバイスいただければと思います。

補足

>出来るというのは、ご自身で実装できるという意味でしょうか？
その通りです。自分で実装しました。
（そもそも他人のプラグイン等使わずに作ることが目的なので。）

>いずれにしてもソースがないとアドバイスのしようがないと思いますよ。
了解しました。以下にソースを貼らせていただきます。

HTML：
----------------------------------------------------------------
<div id="mainVisualContainer">
<div id="mainVisualWrap">
<ul>
<li><img src="/common/images/mainvisual01.jpg" alt=""></li>
<li><img src="/common/images/mainvisual02.jpg" alt=""></li>
<li><img src="/common/images/mainvisual03.jpg" alt=""></li>
<li><img src="/common/images/mainvisual04.jpg" alt=""></li>
<li><img src="/common/images/mainvisual05.jpg" alt=""></li>
</ul>
</div><!--mainVisualWrap-->
<p class="prevBtn"><a href="#">前へ</a></p>
<p class="nextBtn"><a href="#">次へ</a></p>
<ol id="carouselIndicator">
<li><a class="current" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ol>
</div><!--mainVisualContainer-->
----------------------------------------------------------------

CSS：
----------------------------------------------------------------
#mainVisualContainer{width:100%;position:relative}#mainVisualContainer .prevBtn,#mainVisualContainer .nextBtn{position:absolute;z-index:2;bottom:0}#mainVisualContainer .prevBtn a,#mainVisualContainer .nextBtn a{vertical-align:middle;color:#00ABF4;text-decoration:none}#mainVisualContainer .prevBtn a:before,#mainVisualContainer .nextBtn a:before{content:"";display:block;width:6px;height:6px;position:absolute;top:4px;left:-14px;border-bottom:2px solid #00ABF4;border-right:2px solid #00ABF4;transform:rotate(-225deg);-moz-transform:rotate(-225deg);-webkit-transform:rotate(-225deg);-o-transform:rotate(-225deg);-ms-transform:rotate(-225deg)}#mainVisualContainer .prevBtn{left:25px}#mainVisualContainer .nextBtn{right:25px}#mainVisualContainer .nextBtn a:before{transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);left:35px}#mainVisualWrap{width:100%;overflow:hidden;position:relative}#mainVisualWrap ul{position:absolute;top:0;left:0;width:100%}#mainVisualWrap ul li{width:20%;float:left}#mainVisualWrap ul li img{max-width:100%}#carouselIndicator{position:absolute;bottom:14px;left:0;width:100%;height:12px;z-index:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}#carouselIndicator li{display:inline-block}#carouselIndicator li a{display:block;margin:3px;border:1px solid #A7A7A7;border-radius:8px;width:8px;height:8px;background:linear-gradient(to bottom, #a7a7a7 0%,#f0f0f0 60%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0.6, #f0f0f0), color-stop(0, #a7a7a7));color:transparent}#carouselIndicator li a.current{background:linear-gradient(to top, #00aaeb 26%,#5bd2ff 92%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0.92, #00aaeb), color-stop(0.26, #5bd2ff));border:1px solid #0099D3}
----------------------------------------------------------------