質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

5回答

2804閲覧

JavaScriptによるスライドショー

Sen

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2015/05/27 08:38

mainの画像が、spring→summer→autumn→winterと切り替わる、スライドショーを作るにはどうすれば良いのでしょうか?

lang

1<html> 2<head> 3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4<script src="jquery-1.6.2.js"></script> 5<title>スライドショー</title> 6<script type="text/javascript"> 7//関数を追加する 8$(document).ready(function(){ 9 10}); 11</script> 12</head> 13<body> 14<input type="button" value="スライドショー開始" id="slideshow"> 15<hr> 16<img src="spring.jpg" width="90" height="90" class="thumb"> 17<img src="summer.jpg" width="90" height="90" class="thumb"> 18<img src="autumn.jpg" width="90" height="90" class="thumb"> 19<img src="winter.jpg" width="90" height="90" class="thumb"> 20<hr> 21<img src="spring.jpg" width="320" height="320" class="main"> 22</body> 23</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

flexsliderというプラグインをオススメします。

投稿2015/05/27 08:48

orange0190

総合スコア1698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

画像全部重ねて順序(z-index)変更して表示するとか?(゜_゜)ウーン

投稿2015/12/23 09:42

waritocomatta

総合スコア67

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こんなかんじかな

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

投稿2015/05/30 19:21

1000

総合スコア204

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

もし自作でコーディングするという意味でしたらstate管理と切り替えの機能を作るところが重要ですね。
もしそういう意味なら追記すると良いかと。

自分が使ったことのあるjQueryプラグインはbxSliderですがなかなか使いやすかった印象があります。

投稿2015/05/27 12:07

Cf_cwd

総合スコア730

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こんにちは。

bxSlider もなかなか使えますよ。

デモ の中の 13. Callback API で確認できるように、スライドの移動が
完了したときのイベントハンドラを設定できるので、このハンドラで、
拡大表示のための
<img class="main">
に、現在表示しているサムネイルの画像を渡してやれば、
意図しているUIが実現できそうな気がします。

投稿2015/05/27 09:31

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問