sliderのカスタマイズ　jQuery

###前提
jQueryでスライダーをつくりました。
現在は6枚の写真を一枚ずつ自動で移動するようにしています。
（一度に3枚表示されています）
また横の矢印ボタンでも移動できるようにしています。

###実現したいこと
写真の数を２０以上にする時、一枚ずつ移動ではなく3枚一緒に自動で移動して、ループにしたいと思っています。
どうぞよろしくお願いします。

###分からないこと
ループの仕方
現在、写真をanimate移動した後,$(this).css("left", 0);で写真の位置を元にもどしてループしています。
20枚ほどでこの方法だとスクロールした後に逐一最初にもどってしまいます。
皆様にはループの仕方をお教えいただければと思います。
（3枚同時移動はcssの移動量を変えれば良いのでわかります。）

###該当のソースコード

html
1<div class="items_wrap">
2                    <div class="prevBtn"><img src="/img/gp/prevBtn.png" alt="prev"></div>
3
4                    <div class="items clearfix">
5                        <ul>
6                            <li class="item item01">
7                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office01.png" alt="office01"></a></div>
8                            </li>
9
10                            <li class="item item02">
11                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office02.png" alt="office02"></a></div>
12                            </li>
13                            <li class="item item03">
14                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office03.png" alt="office03"></a></div>
15                            </li>
16
17                            <li class="item item04">
18                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office03.png" alt="office03"></a></div>
19                            </li>
20
21                            <li class="item item05">
22                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office02.png" alt="office03"></a></div>
23                            </li>
24                            
25                            <li class="item item06">
26                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office01.png" alt="office03"></a></div>
27                            </li>
28                        </ul>
29                    </div>
30
31                    <div class="nextBtn"><img src="/img/gp/nextBtn.png" alt="" arrow02=""></div></div>
32

css
1.items_wrap{
2    position: relative;
3}
4.items{
5    position: relative;
6    margin-left: 15px;
7    width: 995px;
8    height: 231px;
9    overflow: hidden;
10}
11
12.items ul{
13    position: absolute;
14}
15
16.item {
17    float: left;
18    width: 309px;
19    height: 231px;
20    position: relative;
21    display: block;
22    z-index: 1;
23    margin-right: 32px;
24}

javascript
1$(function(){
2    $itemContainer = $(".items");
3    //スクロールのwrapの幅を設定
4    var $items = $(".items ul li");
5    $(".items ul").css({width: $items.outerWidth(true) * $items.length});
6
7    // スクロールの方向 -1の時には左、1の時には右
8    var dir = -1;
9
10    // スクロールのインターバル
11    var interval = 3500;
12
13    // スクロールのスピード
14    var duration = 700;
15
16    // タイマー用の変数
17    var timer;
18
19    // SlideTimer();
20    timer = setInterval(slideTimer, interval);
21
22    function slideTimer(){
23        if(dir == -1){
24            //＜ー
25            $(".items ul").animate({"left" : "-=340px" }, duration, function(){
26                var $target = $(".items ul li:first");
27                $(this).append($target);
28                $(this).css("left", 0);
29                $(".items ul").clearQueue();
30            });
31        }else{
32            //ー＞
33            var $target = $(".items ul li:last");
34            $(".items ul").prepend($target);
35            $(".items ul").css({'left': -340}).animate({"left" : 0 }, duration, function(){
36
37                dir = -1;
38                $(".items ul").clearQueue(); 
39            });
40        }
41    }
42
43    // 前へボタン
44    $(".prevBtn").stop(true).click(function(){
45        // スクロール方向の切り替え（右）
46        dir = 1;
47
48        // タイマーを停止して再スタート
49        clearInterval(timer);
50        timer = setInterval(slideTimer, interval);
51
52        // 初回の関数実行
53        slideTimer();
54    });
55
56    // 次へボタン
57    $(".nextBtn").stop(true).click(function(){
58        // スクロール方向の切り替え（左）
59        dir = -1;
60        clearInterval(timer);
61        timer = setInterval(slideTimer, interval);
62
63        slideTimer();
64    });
65});
66

kei344

2016/08/15 13:31

何がわからないか、エラーは出ていないのかなど、具体的に質問文に追記いただいたほうが回答を得られやすいと思います。

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

回答1件

ベストアンサー

困ってる点がよくわからないですが、スクロール部分ということはこういう事ですか？
回数分やればいいだけかと思ったのですが。

左方向（とNEXT）しかやってません。
聞きたかったことと違ったらごめんなさい。

javascript
1$(function(){
2    $itemContainer = $(".items");
3    //スクロールのwrapの幅を設定
4    var $items = $(".items ul li");
5    $(".items ul").css({width: $items.outerWidth(true) * $items.length});
6
7    // スクロールの方向 -1の時には左、1の時には右
8    var dir = -1;
9
10    // スクロールのインターバル
11    var interval = 3500;
12
13    // スクロールのスピード
14    var duration = 700;
15
16    // タイマー用の変数
17    var timer;
18
19    // SlideTimer();
20    timer = setInterval(function(){ slideTimer(3); }, interval);
21
22    // スクロール量を受け付けられるようにした。
23    function slideTimer(amount){
24        amount = amount || 1; // ※ 省略時は 1
25        if(dir == -1){
26            //＜ー
27            // ※ この方向しか実装してません。
28          
29            $(".items ul").animate({"left" : "-="+340*amount+"px" }, duration, function(){
30              for(var i=0; i<amount; i++){
31                var $target = $(".items ul li:first");
32                $(this).append($target);
33              }
34                $(this).css("left", 0);
35              for(var i=0; i<amount; i++){
36                $(".items ul").clearQueue();
37              }
38            });
39        }else{
40            //ー＞
41            var $target = $(".items ul li:last");
42            $(".items ul").prepend($target);
43            $(".items ul").css({'left': -340}).animate({"left" : 0 }, duration, function(){
44
45                dir = -1;
46                $(".items ul").clearQueue(); 
47            });
48        }
49    }
50
51    // 前へボタン
52    $(".prevBtn").stop(true).click(function(){
53        // スクロール方向の切り替え（右）
54        dir = 1;
55
56        // タイマーを停止して再スタート
57        clearInterval(timer);
58        timer = setInterval(slideTimer, interval);
59
60        // 初回の関数実行
61        slideTimer();
62    });
63
64    // 次へボタン
65    $(".nextBtn").stop(true).click(function(){
66        // スクロール方向の切り替え（左）
67        dir = -1;
68        clearInterval(timer);
69        timer = setInterval(function(){ slideTimer(3); }, interval);
70
71        slideTimer();
72    });
73});