###前提・実現したいこと
前提
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}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/30 10:48