サムネイルをクリックするとメイン画像が切り替わるコードです。
メイン画像の横に、前の画像・次の画像に切り替える「<」「>」ボタンをつけたいです。
HTML
1<div class="mainimage"> 2 <img src="gazou01.jpg" alt="画像1"> 3</div> 4 <div class="thumbnail"> 5 <ul> 6 <li><img src="gazou01.jpg" alt="画像1"></li> 7 <li><img src="gazou02.jpg" alt="画像2"></li> 8 <li><img src="gazou03.jpg" alt="画像3"></li> 9 </ul> 10</div> 11 12<div class="mainimage"> 13<img src="gazou04.jpg" alt="画像4"> 14</div> 15 <div class="thumbnail"> 16 <ul> 17 <li><img src="gazou04.jpg" alt="画像5"></li> 18 <li><img src="gazou05.jpg" alt="画像6"></li> 19 <li><img src="gazou06.jpg" alt="画像7"></li> 20 </ul> 21</div>
JS
1<script> 2$(function(){ 3 $('.thumbnail img').on('click',function(){ 4 $(this).closest('.thumbnail').prev('.mainimage').find('img').attr({ 5 src:$(this).attr('src'), 6 alt:$(this).attr('alt'), 7 }); 8 }); 9}); 10</script>
回答2件
あなたの回答
tips
プレビュー