回答編集履歴

1 chousei

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="画像１">

</div>

<div class="thumbnail">

<ul>

<li><img src="gazou01.jpg" alt="画像１"></li>

<li><img src="gazou02.jpg" alt="画像２"></li>

<li><img src="gazou03.jpg" alt="画像３"></li>

</ul>

</div>

<div class="mainimage">

<img src="gazou04.jpg" alt="画像４">

</div>

<div class="thumbnail">

<ul>

<li><img src="gazou04.jpg" alt="画像４"></li>

<li><img src="gazou05.jpg" alt="画像５"></li>

<li><img src="gazou06.jpg" alt="画像６"></li>

</ul>

</div>

```