http://yurixxx8.hatenablog.com/entry/2017/02/05/022049
のサイトのコードをサンプルに作成したのですが、
以下がうまくいきません。どうすればいいでしょうか?
1.画像スライド時に画像が下にはみ出ます(画像サイズが1000×625)
どうすれば、はみ出ずにスムーズに流れるでしょうか。
2.最終スライドのあと、トップに戻るスライドがスムーズになりません。
2.1枚目の画像は拡大、2枚目の画像は縮小するように交互に拡大、縮小をスライドするにはどうすればいいでしょうか。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> * { margin: 0; padding: 0; } .slideshow { position: relative; width: 70%; padding-top: 70%; overflow: hidden; margin: 0 auto; } .slideshow .item { width: 100%; position: absolute; top: 0; display: none; } .in { -webkit-transform: scale(1); transform: scale(1); z-index: 2; } .out { -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transition: 4s; transition: 4s; z-index: 1; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(window).load(function(){ var slide = $('.slideshow'); var i = 0; // ページの読み込み時にスライドの1枚目を2000ミリ秒かけてフェードイン slide.find('.item').eq(i).fadeIn(2000).addClass('in'); // スライドの枚数を調べて変数に格納 var total = $('.slideshow .item').length -1; // 処理を繰り返す setInterval(function(){ if(i < total){ slide.find('.item').eq(i).addClass('out'); slide.find('.item').eq(i).removeClass('in'); j = i; i++; setTimeout(function(){ // 1000ミリ秒後に3500ミリ秒かけてフェードインする slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out'); },1000); // 4500ミリ秒かけてフェードアウトする slide.find('.item').eq(j).fadeOut(4500); } else if(i == total){ slide.find('.item').eq(i).addClass('out'); slide.find('.item').eq(i).removeClass('in'); j = i; i = 0; setTimeout(function(){ slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out'); },1000); slide.find('.item').eq(j).fadeOut(4500); }; // この値を変更すると、処理の間隔を遅くしたり早くしたりできる },4500); }); </script> </head> <body> <h1 class="title"></h1> <div class="slideshow"> <img class="item" src="main3.jpg" alt=""> <img class="item" src="main2.jpg" alt=""> <img class="item" src="main1.jpg" alt=""> </div> </body> </html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/27 06:12
2017/08/27 07:22
2017/08/27 07:49
2017/08/27 07:54
2017/08/28 15:00
2017/09/03 10:13
2017/09/03 11:08
2017/09/10 02:43
2017/09/12 21:42