今回もよろしくお願いします。
JSでサムネイル付きスライダーを作っているのですが、現在は選択されている画像のサムネイルが薄くなる、という変化に設定しました。
これを薄くなるのではなく別の画像に差し変わるようにしたいのですが、どうしたらうまく画像をリンクできるでしょうか。よろしくお願いします。
<script> $(function(){ var slidSpd = 300; //フェードの速度 var slidTimer = 8000; //スライドの間隔 var count = 0; //count番目の画像が表示される(0から数える) //画像の枚数を調べて<li>にidを付加 var qua = $("#photo li").length; for(i=0; i<qua; i++) { //メイン画像のリストにidを付与 $("#photo li:eq("+i+")").attr("id", "list"+ i); //サムネイル画像のリストにidを付与 $("#thum li:eq("+i+")").attr("id", "btn"+ i); } //画像をフェードさせる関数 function photoFade() { //countと同じ番号のidが振られた<li>を一番後ろ(重なりの一番上にくる)へ移動させる $("#photo li#list"+count).appendTo('#photo'); //移動させた<li>の透明度を0に $('#photo li:last').css({ opacity:'0'}) //透明度を0→100へアニメーションさせ、フェードで出現するように見せる $('#photo li:last').stop(true, false).animate({ opacity:'1' }, slidSpd ); //全てのサムネイル画像の透明度を1に $("#thum li").css({ opacity:'1'}) //countと同じ番号のidが振られたサムネイルのみアニメーションさせる (ここを画像にしたい) $("#thum #btn"+count).stop(true, false).animate({ opacity:'0.8' }, slidSpd ); } //カウントを1増やす関数 function countUp(){ //countが画像枚数より大きくなれば0へ戻し、それ以外なら1増やす if(count>=qua-1) { count = 0; } else { count ++; } } //slidTimer秒毎に繰り返し処理をさせる関数 var timerID; function timerStart(){ clearInterval(timerID); timerID = setInterval(function(){ countUp(); photoFade(); }, slidTimer); }; //サムネイルを押した時の処理 $("#thum li").click(function(){ var index = $("#thum li").index(this); count = index; photoFade(); timerStart(); }); //スライドスタート photoFade(); timerStart(); }); </script>
初心者なので手探りでやっております。よろしくおねがします。
<div id="slider"> <ul id="photo"> <li><img src="img/1-1.png"></li> <li><img src="img/1-2.png"></li> <li><img src="img/1-3.png"></li> </ul> <ul id="thum"> <li><img src="img/1-1-1.png"></li> <li><img src="img/1-1-2.png"></li> <li><img src="img/1-1-3.png"></li> </ul> </div>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。