前提・実現したいこと
Wordpressの案件にて
サムネイル付きのスライドショーを作成しなければなりません。
大画面の方でフェード式のスライドショーが流れており
サムネイルの方の画像をマウスオーバーすると、スライドショーが止まり、
マウスオーバーしている画像が大画面に表示される仕様です。
■■な機能を実装中に以下のエラーメッセージが発生しました。
いろいろと調べながら以下のコードを入力いたしましたが、
自動のスライドショーがうまく機能しません。
(サムネイルのマウスオーバー時の表示はうまくいきます)
一枚だけ画像が切り替わり、
そこで止まってしまいます。
マウスオーバー後にマウスアウトしても、
一枚だけ画像が変わり止まります。
問題点を教えていただければと思います。
エラーメッセージ
### 該当のソースコード index.php <div id="slideshow"> <div> <div><img src="<?php echo get_template_directory_uri() ?>/images/img1.jpg" alt="" /></div> <div><img src="<?php echo get_template_directory_uri() ?>/images/img2.jpg" alt="" /></div> <div><img src="<?php echo get_template_directory_uri() ?>/images/img3.jpg" alt="" /></div> <div><img src="<?php echo get_template_directory_uri() ?>/images/img4.jpg" alt="" /></div> <div><img src="<?php echo get_template_directory_uri() ?>/images/img5.jpg" alt="" /></div> </div> <ul> <li><a href="https://testest.ichitaro.work/staff/"><img src="<?php echo get_template_directory_uri() ?>/images/img1.jpg" width="100" height="75" alt="" title="N OFFICE"/></a></li> <li><a href="https://testest.ichitaro.work/staff/"><img src="<?php echo get_template_directory_uri() ?>/images/img2.jpg" width="100" height="75" alt="" /></a></li> <li><a href="javascript:void(0);"><img src="<?php echo get_template_directory_uri() ?>/images/img3.jpg" width="100" height="75" alt="" /></a></li> <li><a href="javascript:void(0);"><img src="<?php echo get_template_directory_uri() ?>/images/img4.jpg" width="100" height="75" alt="" /></a></li> <li><a href="javascript:void(0);"><img src="<?php echo get_template_directory_uri() ?>/images/img5.jpg" width="100" height="75" alt="" /></a></li> </ul> </div><!--/#slideshow-->
script.js let setId = '#slideshow'; let fadeTime = 1000; let delayTime = 2000; jQuery(setId + ' div div').each(function(i){ jQuery(this).attr('id','view' + (i + 1).toString()); jQuery(setId + ' div div').css({zIndex:'98',opacity:'0'}); jQuery(setId + ' div div:first').css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime); }); jQuery(setId + ' ul li').mouseover(function(){ clearInterval(setTimer); let connectCont = jQuery(setId + ' ul li').index(this); let showCont = connectCont+1; jQuery(setId + ' div div#view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){jQuery(this).css({zIndex:'98'})}); jQuery(setId + ' div div#view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){jQuery(this).css({zIndex:'99'})}); jQuery(this).addClass('active'); jQuery(this).siblings().removeClass('active'); timer(); }); jQuery(setId + ' ul li:not(.active)').hover(function(){ jQuery(this).stop().animate({opacity:'1'},200); },function(){ jQuery(this).stop().animate({opacity:'0.5'},200); }); jQuery(setId + ' ul li').css({opacity:'0.5'}); jQuery(setId + ' ul li:first').addClass('active'); timer(); function timer() { setTimer = setInterval(function(){ jQuery('li.active').each(function(){ let listLengh = jQuery(setId + ' ul li').length; let listIndex = jQuery(setId + ' ul li').index(this); let listCount = listIndex+1; if(listLengh == listCount){ jQuery(setId + ' ul li:first').mouseover() } else { jQuery(this).next('li').mouseover(); }; }); },delayTime); }; jQuery(setId + ' ul li').mouseover(function(){ clearInterval(setTimer); }).mousemove(function(){ clearInterval(setTimer); }).mouseout(function(){ timer(); });
試したこと
script.jsの10行目あたりの
jQuery(setId + ' ul li').mouseover(function(){ clearInterval(setTimer);
のmouseoverをclickにすると
スライドショーは問題なく機能しました。
補足情報(FW/ツールのバージョンなど)
wordpressのバージョンは5.3.2
既存のテーマは使っておりません。
一から制作しております。
あなたの回答
tips
プレビュー