回答編集履歴

1 chousei

yambejp

yambejp score 48967

2019/06/13 10:02  投稿

そうなるとどのサムネイルが選ばれているかわかりづらくなるので
サムネイルにactiveクラスを付加したらどうでしょうか?
```javascript
<style>
img.active{border:solid 1px blue;}
</style>
<script>
$(function(){
 $('.mainimage img')
   .before(
     $('<span>&lt; </span>').on('click',function(){
       var tn=$(this).closest('.mainimage').next('.thumbnail').find('img');
       var idx=tn.index(tn.filter('.active'));
       //idx=(tn.length-1==idx)?0:(idx+1);  
       idx=0?(tn.length-1):(idx-1);
       tn.eq(idx).trigger('click');
     })
   ).after(
     $('<span> &gt;</span>').on('click',function(){
       var tn=$(this).closest('.mainimage').next('.thumbnail').find('img');
       var idx=tn.index(tn.filter('.active'));
       idx=(tn.length-1==idx)?0:(idx+1);
       tn.eq(idx).trigger('click');
     })
     );
 $('.thumbnail img').on('click',function(){
   $(this).closest('.thumbnail').prev('.mainimage').find('img').attr({
   src:$(this).attr('src'),
   alt:$(this).attr('alt'),
   });
   $(this).closest('ul').find('img').removeClass('active');
   $(this).addClass('active');
 });
 $('.thumbnail').each(function(){
   $(this).find('img').eq(0).trigger('click');
 });
});
</script>
<div class="mainimage">
<img src="gazou01.jpg" alt="画像1">
</div>
<div class="thumbnail">
<ul>
<li><img src="gazou01.jpg" alt="画像1"></li>
<li><img src="gazou02.jpg" alt="画像2"></li>
<li><img src="gazou03.jpg" alt="画像3"></li>
</ul>
</div>
<div class="mainimage">
<img src="gazou04.jpg" alt="画像4">
</div>
<div class="thumbnail">
<ul>
<li><img src="gazou04.jpg" alt="画像4"></li>
<li><img src="gazou05.jpg" alt="画像5"></li>
<li><img src="gazou06.jpg" alt="画像6"></li>
</ul>
</div>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る