勉強の為カルーセルを自作しております。
そこで知識のある方に、是非ともお教え頂きたいことがございまして
ご質問させていただきます。
現状私が書いたhtml、css、jsは下記となります。
▼CSS
<style type="text/css">
#Wrap{width:360px; margin:30px auto;}
#Carousel{
width:360px;
height:380px;
padding-top:50px;
padding-bottom:40px;
float:left;
position:relative;
}
#Carousel .Carousel-inner{
height:370px;
overflow:hidden;
}
#Carousel .Carousel-inner ul li{
height:180px;
margin-bottom:10px;
display:block;
}
#btn_up,#btn_down{
position:absolute;
left:165px
}
#btn_up{top:10px;}
#btn_down{bottom:10px;}
▼html
<div id="Wrap" class="clearfix">
<div id="Carousel">
<div class="Carousel-inner">
<div class="CarouselMove">
<ul>
<li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFE599&text=img1"></ …
<li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/99F8FF&text=img2"></ …
<li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFC8EC&text=img3"></ …
<li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFC8EC&text=img4"></ …
</ul>
</div>
</div>
<a href="#" id="btn_up"><img src="img/up.gif" alt="" width="30" height="30" /></a>
<a href="#" id="btn_down"><img src="img/down.gif" alt="" width="30" height="30" /></a>
</div>
</div>
▼JS
$(function(){
var target = $('#Carousel');
var targetList = target.find('li');
var targetLength = targetList.length;
var showLength = 2;//見えている枚数
var moveLength = 2;//動かす枚数
var itemHeight = targetList.outerHeight(true);//画像一枚の高さ
var moveDistance = itemHeight * moveLength;//一度に動かす量
var moveSpeed = 400;
var easing = 'swing';
var clickFlg = 0;
$('#btn_down').click(function(e){
e.preventDefault();
if(!clickFlg){
clickFlg = 1;
var clone = target.find('li').slice(0,moveLength).clone(true);
clone.appendTo(target.find('li').parent().filter(':last'));
target.find('li:first').stop()
.animate({marginTop : '-=' + moveDistance}, moveSpeed , easing , function(){
target.find('li').slice(0,moveLength).remove();
clickFlg = 0;
});
}else return;
});
});
上記を実行すると問題なく動きます。
ただ、btn_upについてはどのように記述すれば良いかがわからず
教えて頂きたいと思っております。
この考えでダメであれば、代替案をご教示願えれば幸いです。
仕様としましては、今後プラグインにする予定でして、
var showLength = 2;//見えている枚数
var moveLength = 2;//動かす枚数
上記の2点は変更できるようにしたいと思っております。
また、1点現状でも何故こうなるかわからない点がございまして、
var clone = target.find('li').slice(0,moveLength).clone(true);
このtarget.find('li')を変数に格納しているtargetListにすると
動作しなくなってしまいます。何故なのかわからず。。
こちらと併せてご教示いただけませんでしょうか。
お忙しいところ大変恐縮ですが
宜しくお願い致します。
No.1ベストアンサー
- 回答日時:
こんにちは。
>ただ、btn_upについてはどのように記述すれば良いかがわからず
ほとんど、btn_downの処理と同じではないでしょうか。(方向が逆になるだけ)
簡単に整理すれば
1)リストの最後から移動コマ分の複製をリストの前に追加
2)リストの表示位置を調整(追加する前と同じになるように)
3)リストの表示を移動(アニメーション)
4)(コールバックで)リストの最後から移動分のリストを削除
みたいな感じ。
>var clone = target.find('li').slice(0,moveLength).clone(true);
>このtarget.find('li')を変数に格納しているtargetListにすると
>動作しなくなってしまいます。
最初にtargetListを定義したときは初期状態の要素構成で定義されています。
その後、アニメーションをするとクローン(初期の要素とは別要素)が追加され、もとからあった要素は削除され、順序も変わってしまいます。
それなので、後からtargetListを参照しても該当する要素がすでになかったり、その時の表示状態とは順序が変わっていたりするのでうまくいかないのではないでしょうか。
カルーセルの方法として、ご提示のように個々のリストをコピーしながら順次入れ替えてゆく方法と、初期設定で表示コマ分だけリストに追加しておいて、後はUL要素全体を移動することで表示位置を変えるだけ(LI要素は入れ替えない)という方法が考えられます。
後者の方法であれば要素が入れ替わることがないので、仮にtargetListを参照しても実際の構成と同じものが得られるはずです。
検索すると、先人たちのサンプルがいろいろ見つかると思いますので、考え方の参考にすると良いのではないでしょうか?
また、上記の両方の方法で作成してみるというのも勉強に役立つかもしれません。
この回答への補足
ご回答本当にどうもありがとうございましました。実際にやってみます!また、やってみて問題なくできれば良いのですが、もしつまづいたらもう一度こちらで質問させて頂きたく、思っております。
ベストアンサーとさせて頂きますが、もう少々お待ちいただければ幸いです。よろしくお願いいたします。
ご回答いただきありがとうございました!
無事出来ました。本当に感謝しております。
またご相談させていただくかもしれませんが、
宜しくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
swiper.jsについて
-
CSS のみのタブ切り替えについて
-
htmlの記述で link rel=styles...
-
画像の特定の座標にカーソルが...
-
【初心者】UWSCでjavascriptで...
-
複数の画像の中から複数の画像...
-
透過pngの透明部分以外をクリッ...
-
jQueryアコーディオンで複数メ...
-
プルダウンとチェックボックス...
-
スワップイメージが上手く動作...
-
ランダムに画像を表示し、ポッ...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
背景色を透明化
-
javascriptで教えてください。 ...
-
マウスオーバーで画像変更で
-
プラグイン識別_フラッシュflash
-
アクセスするたびに画像を変える
-
クリックで次の画像へ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
jsでグリッドデザインのサムネ...
-
Javaスクリプトで画像を縦にス...
-
複数の要素へ appendchild でき...
-
CSSでマウスオーバーした画像を...
-
【iOS及びAndroid】リンク画像...
-
スライドショー「Skitter」をカ...
-
Dreamweaver上とデバイスプレビ...
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
チェックボックスと画像切替の連動
-
jqueryのプラグインslickの画像...
-
Javascriptを使用したスライド...
-
bxSliderのランダム表示について
-
Firefoxとクロームでフェードイ...
おすすめ情報