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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

Q&A

解決済

2回答

642閲覧

縦スクロールで表示が変わるスライドショーを実装したい。

scottie320

総合スコア27

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

0グッド

0クリップ

投稿2021/01/31 16:34

縦スクロールで下記のとおりに記事が入れ代わりで表示される機能を実装と考えています。

  1. 記事①を下からスクロールで表示
  2. 記事①を上へスクロールして非表示、記事②を下からスクロールで表示
  3. 記事②を上へスクロールして非表示、記事③を下からスクロールで表示

しかしながら、現状のコードだと記事①と②が同時にスクロールで表示、非表示されます。
原因がわからず、ご意見をいただきたいです。

Code
local.js

js

1(function ($) { 2 $(document).ready(function () { 3 slide_default_num = /*1*/ 0; // 画面初期表示時に表示するスライド番号 4 slide_star_num = /*2*/ 0; // スライドショー開始番号 5 slide_end_num = 3; // スライドショー終了番号 6 init(); 7 }); 8 9 function init() { 10 // すべての記事を非表示 11 $('.list-topics li').hide(); 12 // 1番目の記事を表示 13 $('.list-topics li').eq(slide_default_num).show(); 14 main(); // ← mainを実行するよう追加 15 } 16 17 /** 18 * メイン処理 19 **/ 20 function main() { 21 // 各項目 22 $('.list-topics li').hide(); // すべての画像を非表示 23 $('.list-topics li').eq(slide_star_num).show(); //最初の画像を表示 24 25 // 画像の縦スクロール 26 scroll_up(); 27 scroll_up2(); 28 slide_star_num = 1; 29 $('.list-topics li').eq(slide_star_num).show(); 30 scroll_up(); 31 scroll_up2(); 32 // 次の画像を設定 33 $('.list-topics li').eq(slide_star_num).show(); 34 slide_star_num = 2; 35 scroll_up(); 36 } 37 38 /** 39 * 画像の縦スクロール 40 * 41 **/ 42 var scroll_y = 0; 43 44 function scroll_up() { 45 $('.list-topics li') 46 .eq(slide_star_num) 47 .css({ 48 top: '200px' 49 }) 50 .animate({ 51 top: 0 52 }, 2000); 53 } 54 function scroll_up2() { 55 $('.list-topics li') 56 .eq(slide_star_num) 57 .delay(1500) 58 .css({ 59 top: '0' 60 }) 61 .animate({ 62 top: '-200px' 63 }, 2000); /* ! */ 64 } 65})(jQuery);

index.php

php

1<?php $args = array( 2 'post_type' => 'news', // 投稿タイプ 3 'posts_per_page' => 3, // 表示件数。 -1ならすべての投稿を取得 4 'order' => 'DESC'); // 降順(日付の場合、日付が新しい順)?> 5<?php $loop = new WP_Query($args);?> 6 7<?php if ($loop->have_posts()) : ?> 8 <ul class="list-topics"> 9<?php while ($loop->have_posts()) : $loop->the_post(); ?> 10 <li id="slides"><time datetime="<?php esc_html(the_time('Y-m-d')); ?>"><?php esc_html(the_time('Y.m.d')); ?></time><a href="<?php esc_url(the_permalink()); ?>"><?php esc_html(the_title()); ?></a></li> 11<?php endwhile; ?> 12 </ul> 13 14<?php endif; ?><?php wp_reset_postdata();?> 15</div></div>

style.css

css

1#page-home #main .sec-topics .sec-in-s .list-topics { 2 overflow: hidden; 3} 4#slides { 5 margin: 0 auto; 6 padding: 32px 32px 32px 32px; 7 align-items: center; 8 position: relative; 9}

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

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

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

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

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

guest

回答2

0

自己解決

下記にjsを変更して実装しました。

js

1 function switchByWidth() { 2 if (window.matchMedia('(max-width: 767px)').matches) { 3 //スマホ処理 4 var loop = setInterval(function () { 5 //li先頭要素のクローンを作成 6 var clone = $('.list-topics li:first').clone(true); 7 //li先頭要素のマージントップにマイナスを指定しアニメーションさせる 8 $('.list-topics li:first').animate( 9 { 10 marginTop: '-84px', 11 }, 12 { 13 duration: 1500, 14 complete: function () { 15 //処理完了時に先頭要素を削除 16 $('.list-topics li:first').remove(); 17 //クローンをliの最後に追加 18 clone.clone(true).insertAfter($('.list-topics li:last')); 19 }, 20 } 21 ); 22 }, 3000); 23 } else if (window.matchMedia('(min-width:768px)').matches) { 24 //PC処理 25 var loop = setInterval(function () { 26 //li先頭要素のクローンを作成 27 var clone = $('.list-topics li:first').clone(true); 28 //li先頭要素のマージントップにマイナスを指定しアニメーションさせる 29 $('.list-topics li:first').animate( 30 { 31 marginTop: '-133px', 32 }, 33 { 34 duration: 1500, 35 complete: function () { 36 //処理完了時に先頭要素を削除 37 $('.list-topics li:first').remove(); 38 //クローンをliの最後に追加 39 clone.clone(true).insertAfter($('.list-topics li:last')); 40 }, 41 } 42 ); 43 }, 3000); 44 } 45 } 46 window.onload = switchByWidth; 47 window.onresize = switchByWidth;

投稿2021/02/07 05:41

scottie320

総合スコア27

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

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

0

jsはanimationの完了を待って次の処理をする、なんてことはしてくれません
jQueryは同じ要素のアニメーションであれば順次完了を待って実行してくれますが
違う要素のアニメーションはダメです

jQueryのanimationはjQuery版Promiseを返してくれてるので
thenでアニメーションを数珠繋ぎに繋げることができます

投稿2021/02/01 09:48

KazuhiroHatano

総合スコア7802

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

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

scottie320

2021/02/07 05:40

回答ありがとうございます。 Promiseでの形を試してみましたが、うまくいかず、下記の方法で実装しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問