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

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

ただいまの
回答率

90.47%

  • JavaScript

    17014questions

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

JavaScriptによるスライドショー

受付中

回答 5

投稿

  • 評価
  • クリップ 1
  • VIEW 1,071

Sen

score 5

mainの画像が、spring→summer→autumn→winterと切り替わる、スライドショーを作るにはどうすれば良いのでしょうか?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.6.2.js"></script>
<title>スライドショー</title>
<script type="text/javascript">
//関数を追加する
$(document).ready(function(){

});
</script>
</head>
<body>
<input type="button" value="スライドショー開始" id="slideshow">
<hr>
<img src="spring.jpg" width="90" height="90" class="thumb">
<img src="summer.jpg" width="90" height="90" class="thumb">
<img src="autumn.jpg" width="90" height="90" class="thumb">
<img src="winter.jpg" width="90" height="90" class="thumb">
<hr>
<img src="spring.jpg" width="320" height="320" class="main">
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

こんにちは。

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

こんなかんじかな

<style type="text/css">
#thumbnails { text-align:center;}
#thumbnails li { display:inline-block;}
#target { width:320px; height:320px; margin:0 auto; position:relative;}
#target li { list-style:none; position:absolute;}
#target .on li { filter:alpha(opacity=0); -moz-opacity:0; opacity:0;} 
#target img { position:absolute; display:block; width:320px; height:320px}
</style>

<input type="button" value="スライドショー開始" id="slideshow">

<hr>
<div id="thumbnails">
    <ul>
        <li class="li1"><img src="demo1.png" width="90" height="90" class="thumb"></li>
        <li class="li2"><img src="demo2.png" width="90" height="90" class="thumb"></li>
        <li class="li3"><img src="demo3.png" width="90" height="90" class="thumb"></li>
        <li class="li4"><img src="demo5.png" width="90" height="90" class="thumb"></li>
    </ul>
</div>
<hr>
<div id="target">
    <ul>
        <li><img src="demo1.png" width="90" height="90" class="thumb"></li>
    </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$( function(){
    var target = $('#target ul');
    var fadeSpeed = 500;
    var switchDelay = 2000;
    var flg = false;
    var first = true;
    var timer;
    function timerStart(){
        target = $('#target ul');
        timer = setInterval(function(){
            target.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').animate({opacity:'1'},fadeSpeed).end().appendTo(target);
        },switchDelay);
    }
    function timerStop(){
        clearInterval(timer);
    }
    $('#slideshow').click( function(){
        if( flg == false && first == true ){
            target.addClass('on');
            target.find('li').remove();
            var array = [];
            $('#thumbnails').find('li').each( function(){
                var li = $(this)
                array.push(li);
            });
            $.each(array, function(i, li){
                li.clone().appendTo(target);
            });
            target.find('li:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);
            timerStart()
            flg = true;
        } else if( flg == false ){
            target.addClass('on');
            timerStart()
            flg = true;
        } else {
            timerStop()
            target.removeClass('on');
            flg = false;
        }
    });
});
</script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

関連した質問

  • 解決済

    javascriptのアニメーションに関する質問です。

    当方、javascript初心者です。 行いたい事は以下の通りです。 (1) blogの記事(本文内)においてページの表示と同時に動作するグラフ(1目盛づつ増えるアニメーション)

  • 解決済

    JavaScriptでギャラリーを作りたい

    現在JSでギャラリー的なものを作ろうとしています 仕様としては 画面上段に画像(原寸より小さいもの)を表示し、クリックされると下にその画像の原寸大が表示されるというものです ですが

  • 解決済

    画像の上だけで移動する

    任意の画像の上でクリックした時だけ画像を配置したいのですが、どうすれば良いでしょうか? いろいろ試したのですが、うまく作動しないです。 お願いします。 下にプログラムを載せて

  • 解決済

    画像切替の方法(html)

    jsかcssを使って 画像(<img src="">)をクリックした時 交互に入れ替えたいです。 リンクとかは貼っていませんので ただただ画像クリックで切替られたら良い

  • 解決済

    spirng4でjstreeがうまく表示できない理由を教えてください。

    以前質問させていただいた続きです。 同じような質問ばかりして、本当にすいません。 どうしても潰したいのでお願いします。 https://teratail.com/ques

  • 解決済

    springbootのjsファイルについて

    いつも大変お世話になっております。 springbootでjsファイルに記載した内容を機能させたいのですが、なぜか機能しません。 内容としましては、単純にjsが機能しているかを

  • 解決済

    javascriptの処理が一度に動いてしま

    3カラムで画像を並べています。 マウスオーバーした時に「transform: scale()」の値を変えて 画像を拡大させる処理にしたいです。 現状、どの画像をマウスオーバー

  • 解決済

    slickのcdnが効かない

    題名通りslickのcdnが効きません。ファイルダウンロードよりcdnで対処したいので解決法「ファイルをダウンロードする」以外でお願いします。 <!DOCTYPE html>

同じタグがついた質問を見る

  • JavaScript

    17014questions

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