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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

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

Q&A

解決済

1回答

609閲覧

jQueryの自作スライダーについて

tokotokotoko

総合スコア14

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

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

0グッド

0クリップ

投稿2020/06/02 11:36

ご覧いただきありがとうございます。
jQueryを使って自作スライダーの作成を検討しています。

・画像が左から右にゆっくり移動
・ブラインドのような形で左から右に画像が切り替わる

上記の条件を満たすスライダーとして以下のコードを作成しました。

style

1.mainslider { 2 width: 100%; 3 height: auto; 4 padding-top: 56%; 5 position: relative; 6} 7.mainslider #slide-wrap { 8 position: absolute; 9 left: 0; 10 top: 0; 11 right: 0; 12 bottom: 0; 13 z-index:1; 14} 15.mainslider #slide-wrap li { 16 width: 100%; 17 height: 100%; 18 position: absolute; 19 right: 0; 20 top: 0; 21 -webkit-animation: bgscroll 5s linear infinite; 22 animation: bgscroll 5s linear infinite; 23 z-index: 2; 24} 25.mainslider #slide-wrap li:first-child { 26 z-index:3; 27} 28@-webkit-keyframes bgscroll { 0% {background-position:-50px 0;} 100% {background-position: 0px 0;}} 29@keyframes bgscroll { 0% {background-position: -50px 0;} 100% {background-position: 0px 0 ;}}

jQuery

1$(function(){ 2 $("#slide-wrap").find("li:not(:first-child)").hide(); 3 4 setInterval(function(){ 5 $("#slide-wrap").find("li:first-child").animate({width:0},500, "linear") 6 .next("li").fadeIn(500) 7 .end().appendTo("#slide-wrap"); 8 $("#slide-wrap li").css("width","100%"); 9 }, 5000); 10});

html

1<div class="mainslider"> 2 <ul id="slide-wrap"> 3 <li style="background-image: url('img1.jpg')"></li> 4 <li style="background-image: url('img2.jpg')"></li> 5 <li style="background-image: url('img3.jpg')"></li> 6 </ul> 7</div>

やりたいことが出来たと思ったのですが、スライド2回目からおかしくなり、
結果ブラインドのスライドがうまくいきません。

お力を貸していただけますと嬉しいです、よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

自己解決

アニメーションの時間を500→700に変更をしただけで求めていた動きになりました。
切り替えが早すぎて動作がおかしくなったのでしょうか・・
原因の解明はできていないのですが、ひとまず問題は解決したため、自己解決とさせていただきます。
ありがとうございました。

jQuery

1$(function(){ 2 $("#slide-wrap").find("li:not(:first-child)").hide(); 3 4 setInterval(function(){ 5 $("#slide-wrap").find("li:first-child").animate({width:0},700, "linear") 6 .next("li").fadeIn(700) 7 .end().appendTo("#slide-wrap"); 8 $("#slide-wrap li").css("width","100%"); 9 }, 5000); 10});

投稿2020/06/02 12:24

tokotokotoko

総合スコア14

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問