https://www.hakuinet.jp/js/thumbnail_slider.js

1//<![CDATA[
2$(function(){
3    var setId = '#slideshow';
4    var fadeTime = 1000;//フェードが切り替わるのに1秒//
5    var delayTime = 8000;//フェードスピードは8秒間隔//
6
7
8    $(setId + ' div div').each(function(i){
9        $(this).attr('id','view' + (i + 1).toString());
10        $(setId + ' div div').css({zIndex:'98',opacity:'0'});
11        $(setId + ' div div:first').css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime);
12    });
13
14    $(setId + ' ul li').mouseover(function(){
15        clearInterval(setTimer);
16
17        var connectCont = $(setId + ' ul li').index(this);
18        var showCont = connectCont+1;
19
20        $(setId + ' div div#view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'})});
21        $(setId + ' div div#view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'})});
22
23        $(this).addClass('active');
24        $(this).siblings().removeClass('active');
25
26        timer();
27
28    });
29
30    $(setId + ' ul li:not(.active)').hover(function(){
31        $(this).stop().animate({opacity:'1'},200);
32    },function(){
33        //$(this).stop().animate({opacity:'0.5'},200);
34    });
35
36    //$(setId + ' ul li').css({opacity:'0.5'});
37    $(setId + ' ul li:first').addClass('active');
38	
39
40
41    timer();
42
43    function timer() {
44        setTimer = setInterval(function(){
45            $('li.active').each(function(){
46                var listLengh = $(setId + ' ul li').length;
47                var listIndex = $(setId + ' ul li').index(this);
48                var listCount = listIndex+1;
49
50                if(listLengh == listCount){
51                    $(setId + ' ul li:first').mouseover()
52                } else {
53                    $(this).next('li').mouseover();
54                };
55            });
56        },delayTime);
57    };
58});
59//]]>