右方向からのスライドを作りたい
フェードイン・フェードアウトによる
スライダーができたため、
次は右方向からスライドしてくる
スライダーを作成しており、
まず一番初めだけでもフェードインではなく、
スライドで始まる仕組みを作りたいと思っており、
.animate({left:0});を組み込んでみましたが、
うまくいきませんでした。
demo
https://codepen.io/satoru1993/pen/qzNodR
該当のソースコード
html
1<html lang="ja"> 2<head> 3<title>HTML, CSS and JavaScript demo</title> 4<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no"> 5<link rel="stylesheet" type="text/css" href="test.css"> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 7<script type="text/javascript" src="function.js"></script> 8 9</head> 10<body> 11 <header class="hero-header"> 12 <div class="inner"> 13 <div class="slideshow"> 14 <img src="http://placeimg.com/1000/480/any"> 15 <img src="http://placeimg.com/1000/480/arch"> 16 <img src="http://placeimg.com/1000/480/nature"> 17 <img src="http://placeimg.com/1000/480/people"> 18 </div> 19 </div> 20</header> 21</body> 22</html>
css
1/* 2 * Slideshow 3 */ 4.slideshow { 5 overflow: hidden; 6 position: relative; 7 min-width: 960px; 8 height: 465px; 9} 10.slideshow img { 11 display: none; 12 position: absolute; 13 left:100%; 14 15} 16 17 18
js
1$(function(){ 2 /**slideshow**/ 3 4 //slideshow クラスを持った要素ごとに処理を実行 5 $('.slideshow').each(function(){ 6 var $slides = $(this).find('img'),//すべてのスライド 7 slideCount =$slides.length,//スライドの点数 8 currentIndex = 0; //現在のスライドを示すインデックス 9 10 $slides.eq(currentIndex).animate({left:0}); 11 12 //7500ミリ秒ごとにshowNextSlide関数を実行 13 setInterval(showNextSlide, 7500); 14 15 //次のスライドを表示する関数 16 function showNextSlide(){ 17 //次に表示するスライドのインデックス 18 //(もし最後のスライドなら最初に戻る) 19 var nextIndex = (currentIndex + 1) % slideCount; 20 21 //現在のスライドをフェードアウト 22 $slides.eq(currentIndex).fadeOut(); 23 24 //次のスライドをフェードイン 25 $slides.eq(nextIndex).fadeIn(); 26 27 //現在のスライドのインデックスを更新 28 currentIndex = nextIndex; 29 } 30 31}); 32});
最終的には、全てをフェードイン・フェードアウトの
スライダーを作成したいと思っております。
その初期段階になります。
何卒ご添削のほど宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/18 09:18