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

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

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

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

Q&A

解決済

1回答

231閲覧

スライドショーを完成させたい。

Anfanger

総合スコア24

jQuery

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

0グッド

1クリップ

投稿2017/10/18 07:18

現在、①右方向には右のボタンを押すと移動し、左方向には左のボタンを押すと移動する。②右端にいる状態で右のボタンを押すと最初の位置に戻り、 左端にいる状態で左のボタンを押すと最後の位置に移動するようにやりたいのですが、②の実装ができません。その中で、nextボタンで右端にいる状態で右のボタンを押すと最初の位置に戻ることができません。現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
現在の記述で解決したいです。
よろしくお願いいたします。

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>jQuery</title> <link rel="stylesheet" href="../../common/css/reset.css"> <link rel="stylesheet" href="../../common/css/base.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="wrapper"> <div class="slider-wrap"> <div class="slider-area"> <ul class="slider-list clearfix"> <li><img src="./img/1.jpg"></li> <li><img src="./img/2.jpg"></li> <li><img src="./img/3.jpg"></li> <li><img src="./img/4.jpg"></li> </ul> <button type="button" class="slider-ctrl-btn is-prev" data-ctrl="prev"></button> <button type="button" class="slider-ctrl-btn is-next" data-ctrl="next"></button> </div> </div> </div> <script src="../../common/js/jquery.js"></script> <script> $(function() { var slideWidth = $('.slider-list').children('li').width(); var slideNum = $('.slider-list').children('li').length; var now = 0; $('.slider-ctrl-btn').on('click',function() { var slidebtn = $(this).data('ctrl'); if(now < 1 && slidebtn ==='prev') { now = slideNum; } else if(now > slideNum-2 && slidebtn ==='next') { now = 0; } if('next' == slidebtn) { now++; $('.slider-list').stop().animate({ left: -slideWidth * now }); } else if('prev'== slidebtn) { now--; $('.slider-list').stop().animate( { left: -slideWidth * now }); } }); }); </script> </body> </html>
.clearfix:after { display: block; clear: both; content: ''; } .wrapper { padding: 20px; } .slider-wrap { padding: 10px; margin: 0 auto; width: 620px; border-radius: 0px; background-color: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, .4); } .slider-area { position: relative; width: 600px; height: 300px; background-color: #FFF; overflow: hidden; } .slider-list { position: absolute; top: 0; left: 0; width: 2400px; height: 300px; } .slider-list > li { float: left; } .slider-ctrl-btn { position: absolute; top: 50%; margin-top: -15px; width: 30px; height: 30px; border-radius: 15px; background-color: rgba(255, 255, 255, .8); cursor: pointer; } .slider-ctrl-btn.is-prev { left: 20px; } .slider-ctrl-btn.is-next { right: 20px; } ``````ここに言語を入力 コード

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

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

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

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

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

guest

回答1

0

ベストアンサー

JavaScript

1 2 if(now < 1 && slidebtn ==='prev') { 3 now = slideNum; 4 } else if(now > slideNum-2 && slidebtn ==='next') { 5 // now = 0; 6 now = -1; // この後++されて0になるように。 7 } 8```**動くサンプル:**[https://jsfiddle.net/1d5ean1j/](https://jsfiddle.net/1d5ean1j/)

投稿2017/10/21 15:15

kei344

総合スコア69364

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

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

Anfanger

2017/10/25 06:54

ありがとうございました! 細かい指摘をいただき勉強になりました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問