質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1956閲覧

jQuery スライダー コードを簡潔に

may88seiji

総合スコア79

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2016/08/29 14:43

###前提・実現したいこと
前提
jQueryで簡易なスライダーを作りました。

実現したいこと
より単純で短いコードへ添削をお願いしたいです。
関数の使い方など間違っていればご指摘おねがします。

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

javascript

1$(function(){ 2 //変数 3 var duration = 300; 4 var ease = "easeInQuad" 5 var itemLength = $(".item").length; 6 //関数 7 function init(){ 8 $("#prevBtn").on("click",prevhundler); 9 $("#nextBtn").on("click",nexthundler); 10 } 11 function nexthundler(){ 12 next(); 13 }; 14 function prevhundler(){ 15 prev(); 16 }; 17 18function next(){ 19 $(".item").each(function(i){ 20 var $obj = $(this); 21 if( i === itemLength - 1){ 22 $obj.stop().animate({left:"-=100%"},duration,ease,function(){ 23 $(".item:first-child").css({left:"400%"}); 24 $(".items").append($(".item:first-child")); 25 }); 26 }else{ 27 $obj.stop().animate({left:"-=100%"},duration,ease); 28 } 29 }); 30}; 31 32function prev(){ 33 $(".item:last-child").css({left:"-100%"}); 34 $(".items").prepend($(".item:last-child")); 35 $(".item").each(function(){ 36 var $obj = $(this); 37 $obj.stop().animate({left:"+=100%"},duration,ease); 38 }); 39}; 40 //関数 実行 41init(); 42 43}); 44

html

1<!DOCTYPE html> 2<html lang=""> 3<head> 4 <meta charset="UTF-8"> 5 <title>Untitled Document</title> 6 <meta name="Author" content=""/> 7 <link rel="stylesheet" type="text/css" href="style.css"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 10 <script src="script.js"></script> 11 12</head> 13<body> 14 15<div class="items"> 16 <div class="item1 item"></div> 17 <div class="item2 item"></div> 18 <div class="item3 item"></div> 19 <div class="item4 item"></div> 20 <div class="item5 item"></div> 21</div> 22 23<div id="prevBtn">prev</div> 24<div id="nextBtn">next</div> 25 26</body> 27</html>

css

1*{ 2 margin: 0; 3 padding: 0; 4} 5 6html,body{ 7 overflow: hidden;ß 8} 9.item{ 10 width: 100%; 11 height: 300px; 12 position: absolute; 13} 14 15.item1{ 16 background-color: #ff0000; 17 18} 19.item2{ 20 background-color: #0000ff; 21 left: 100%; 22} 23.item3{ 24 background-color: #00ff00; 25 left: 200%; 26} 27.item4{ 28 background-color: #ffff00; 29 left: 300%; 30} 31.item5{ 32 background-color: #00ffff; 33 left: 400%; 34} 35 36#prevBtn{ 37 position: absolute; 38 top: 300px; 39 left: 200px; 40} 41#nextBtn{ 42 position: absolute; 43 top: 300px; 44 left: 400px; 45}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

javascript

1$(function() { 2 //変数 3 var duration = 300; 4 var ease = "easeInQuad" 5 6 // 関数(init)を1つかませる必要はないかと 7 // nexthundler然り、prevhundler然り 8 $("#nextBtn").on("click", next); 9 $("#prevBtn").on("click", prev); 10 11 function next() { 12 // 2番めのitemの左端を決めてやれば・・・ 13 $(".item:nth-child(2)").css("left", "100%"); 14 $(".items").append($(".item:first-child")); 15 $(".item").each(function() { 16 // ・・・ if文で場合分けする必要がなくなる 17 $(this).stop().animate({left:"-=100%"},duration,ease); 18 }); 19 }; 20 21 function prev() { 22 $(".item:last-child").css({left:"-100%"}); 23 $(".items").prepend($(".item:last-child")); 24 $(".item").each(function() { 25 $(this).stop().animate({left:"+=100%"},duration,ease); 26 }); 27 }; 28});

いくつかコメントを入れましたが、
一度しか使わない関数は関数にしなくていい気がします。

next()に関しては分かりづらいかも知れませんが、
prev()を分かっていれば類推できると思います。

次に出てくる(つまり2番目の)divのleftを画面ギリギリ右端外にしておけば
animateで{left:"-=100%"}でスライドして現れるという流れです。

if文で場合分けする必要がなくなるので
コードの可読性も良くなると思います。

投稿2016/08/30 01:48

taro_nii_chan

総合スコア207

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

may88seiji

2016/08/30 10:48

ありがとうございます! 大変参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問