急いでいます！

画像スライダーをやってますが2

締切済

質問者：moko52879
質問日時：2016/04/12 21:09
回答数：2件

通報する

この質問は特に30代の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2016/04/19 13:45

ANo1です。

反応がないようなので、ご覧になっているのかわかりませんが・・・
なさりたいことがよくわからないので、最小限で、一応動作するプリミティブなものを作ってみました。ご参考まで。

どうなさりたいのかわからないので、勝手に以下を想定
　・スライドして切り替わるタイプのスライドショー
　・自動でスタートし、循環して継続表示する
　・サムネイルをクリックすると、それに対応する画像に瞬時切り替えてストップ
　　（以後は、クリックすれば切り替わる機能になる）
　・画像数はHTMLの変更をすることで、自由に増減可能

※ 「一定の数値で0位置に戻す」については、意味がわからないので何もしていません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>Slider Sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#slider * { margin:0; padding:0; list-style-type:none; }
#slider { position:relative; overflow:hidden; margin-bottom:0.5em; }
#slider ul { position:absolute; top:0; left:0; }
#slider ul li { float: left; }
#slider, #slider img { width:200px; height:200px; }
#thumbnail img { width:50px; height:50px; cursor:pointer; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>

<script type="text/javascript">
$(function(){
var duration = 500, pause = 2000;
var box = $("#slider"), panel = $(">ul", box), slides = $(">li", panel);
panel.append(slides.eq(0).clone(true));
var activeslide = 0, slides = $(">li", panel), width = slides.width();
panel.width(width * slides.length);

var timer = setInterval(function(){
if(++activeslide >= slides.length){ panel.css({left:0}), activeslide = 1; }
panel.animate({ left: -activeslide * width }, duration);
}, duration + pause);

$("#thumbnail").on("click", "img", function(evt){
clearInterval(timer);
panel.stop().css({ left: -$(evt.target).index() * width });
});
});
</script>
</head>
<body>

<div id="slider">
<ul>
<li><img src="A.jpg" alt=""></li>
<li><img src="B.jpg" alt=""></li>
<li><img src="C.jpg" alt=""></li>
<li><img src="D.jpg" alt=""></li>
</ul>
</div>

<div id="thumbnail">
<img src="A.jpg" alt="">
<img src="B.jpg" alt="">
<img src="C.jpg" alt="">
<img src="D.jpg" alt="">
</div>

</body>
</html>

※ 一つの方法としての例を示すための原理的な単純なものですが、実際は、一般化してみたり、複数のスライダーを動作させたり、スタート、ストップが自由にできるようにするなどのようにして使うことになると思います。

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2016/04/13 11:40

こんにちは。

CSSが不明なので、どのような仕組みになさろうとしているのかよくわかりませんが・・・
・同じ画像が2セットあるけれど、#s2の方はサムネイルのつもりでしょうか？
・現状はあまり動作していないと思いますが、表示が順に切り替わる
　タイプでしょうか？　それともスライド（アニメーション）して替る
　タイプなのでしょうか？
・サムネイルをクリックした時には、いきなり切り替わる予定なのかな？
・「一定の数値で0位置に戻す」って何の数値でどの位置に戻すのだろう？

一度に全部を作ろうとせずに、
1）自動スライド（切り替わるのか又はアニメーション）だけを作る
2）サムネイルの動作を付け加える
3）「一定の数値で0位置に戻す」機能を付け加える
といった順に作っていった方が、少し回り道になるかも知れませんが、結果的に早そうな気がします。

特に1）については、画像を切り替えるだけの場合はそのまま切り替えるだけで良いですが、スライド（アニメーション）させて、かつ循環（カルーセル）させるような場合には、画面に同時に表示される画像数（＝止まった時に表示される数＋1）だけ両端に揃っていないと空白が表示されることになります。
一方で、循環させない場合には、端部にきたことを判定して移動しないようにする処理が必要になりますね。

ついでですが…
#m1などの要素の個別idを利用しているようですが、それですと画像数が増減したりするごとにスクリプトも修正しなければならなってしまいます。
できるだけ、そのようなことのない作り方をなさった方が便利になると思います。