こんなかんじかな
lang
1
2<style type="text/css">
3#thumbnails { text-align:center;}
4#thumbnails li { display:inline-block;}
5#target { width:320px; height:320px; margin:0 auto; position:relative;}
6#target li { list-style:none; position:absolute;}
7#target .on li { filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}
8#target img { position:absolute; display:block; width:320px; height:320px}
9</style>
10
11<input type="button" value="スライドショー開始" id="slideshow">
12
13<hr>
14<div id="thumbnails">
15 <ul>
16 <li class="li1"><img src="demo1.png" width="90" height="90" class="thumb"></li>
17 <li class="li2"><img src="demo2.png" width="90" height="90" class="thumb"></li>
18 <li class="li3"><img src="demo3.png" width="90" height="90" class="thumb"></li>
19 <li class="li4"><img src="demo5.png" width="90" height="90" class="thumb"></li>
20 </ul>
21</div>
22<hr>
23<div id="target">
24 <ul>
25 <li><img src="demo1.png" width="90" height="90" class="thumb"></li>
26 </ul>
27</div>
28
29<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
30<script type="text/javascript">
31$( function(){
32 var target = $('#target ul');
33 var fadeSpeed = 500;
34 var switchDelay = 2000;
35 var flg = false;
36 var first = true;
37 var timer;
38 function timerStart(){
39 target = $('#target ul');
40 timer = setInterval(function(){
41 target.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').animate({opacity:'1'},fadeSpeed).end().appendTo(target);
42 },switchDelay);
43 }
44 function timerStop(){
45 clearInterval(timer);
46 }
47 $('#slideshow').click( function(){
48 if( flg == false && first == true ){
49 target.addClass('on');
50 target.find('li').remove();
51 var array = [];
52 $('#thumbnails').find('li').each( function(){
53 var li = $(this)
54 array.push(li);
55 });
56 $.each(array, function(i, li){
57 li.clone().appendTo(target);
58 });
59 target.find('li:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);
60 timerStart()
61 flg = true;
62 } else if( flg == false ){
63 target.addClass('on');
64 timerStart()
65 flg = true;
66 } else {
67 timerStop()
68 target.removeClass('on');
69 flg = false;
70 }
71 });
72});
73</script>
74
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。