###前提・実現したいこと
①スライダーの設置
②スライダーの画像ごとにリンクをつけたい
③最後のスライダー画像で止めたい(ループせず一周だけにしたい)
###発生している問題・エラーメッセージ
①と③は設置できたものの、画像へのリンク設定がうまくきません。
1枚ごとに違うリンクを貼っていますが、
1枚目のリンクをずっと引き継いでしまい、2枚目以降のリンクが有効になりません。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>SAMPLE</title> <style type="text/css"> <!-- *{ magin: 0; padding: 0; } #container{ width: 100%; text-align: center; } #slideshow{ visibility: hidden; margin: 0 auto; width: 500px; height: 200px; text-align: left; position: relative; overflow: hidden; } #slideshow img{ top: 0; left: 0; position: absolute; } --> </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"><!-- $(function(){ $(window).load(function(){ //================================================= // ユーザー設定 var divID = 'slideshow' var fadeTime = 2000; var fadeTimeLast = 5000; var switchTime = 3500; //================================================= var objDiv = document.getElementById(divID); if (!objDiv){return;} var objImg = objDiv.getElementsByTagName('img'); objDiv.style.visibility = 'visible'; imgChange(objImg, fadeTime, fadeTimeLast, switchTime, 0); }); function imgChange(objImg, fadeTime, fadeTimeLast, switchTime, cnt){ if (cnt == 0){ if (objImg.length == 0){return;} //画像がない時 $(objImg).css({opacity:'0'}); $(objImg[cnt]).stop().animate({opacity:'1'},fadeTime); if (objImg.length == 1){return;} //1枚だけの時 } else if ((cnt == objImg.length - 1) && (objImg.length > 1)){ for (i = 0; i <= 1; i++){$(objImg[(cnt - 1) + i]).stop().animate({opacity:i},fadeTimeLast);} return; } else { for (i = 0; i <= 1; i++){$(objImg[(cnt - 1) + i]).stop().animate({opacity:i},fadeTime);} } cnt++; setTimeout(function(){imgChange(objImg, fadeTime, fadeTimeLast, switchTime, cnt);},switchTime); }; }); //--> </script> </head> <body> <div id="container"> <div id="slideshow"> <a href="http://yahoo.co.jp"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/S/Shinez/20130424/20130424074133.jpg" alt="" width="500" height="200"></a> <a href="https://www.goo.ne.jp/"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/S/Shinez/20130424/20130424074130.jpg" alt="" width="500" height="200"></a> <a href="http://google.co.jp"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/S/Shinez/20130424/20130424074128.jpg" alt="" width="500" height="200"></a> </div> </div> </body> </html>
このページにあったものを流用しています。→http://d.hatena.ne.jp/Shinez/20130422/p1
色々と調べたのですが解決に至らず、ご存知の方がいらっしゃいましたらご教示くださいませ。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/06 02:58
2017/02/06 06:19
2017/02/06 06:40
2017/02/06 07:12