jsで一定時間ごとにクラスを付け替えて、画像を切り替えていきたいです。
https://www.elan-v.com/
上記サイト、トップの画像切り替えのようにしたくて
使われていそうなコードを切り取ってみたのですが、
うまくいきません。
発生している問題・エラーメッセージ
liにcurrentクラスがつかないです。
該当のソースコード
html
1!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="css/style.css"> 7</head> 8<body id="page-home"> 9 <section class="sec-mv" id="sec-mv"> 10 <ul class="list-mv" id="js-list-mv"> 11 <li></li> 12 <li></li> 13 <li></li> 14 <li></li> 15 </ul> 16 </section> 17 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 18 <script type="text/javascript" src="script/script.js"></script> 19</body> 20</html>
css
1@keyframes slide-left { 2 0% { 3 transform:translateX(0); 4 } 5 100% { 6 transform:translateX(-40px); 7 } 8} 9@keyframes slide-right { 10 0% { 11 transform:translateX(-40px); 12 } 13 100% { 14 transform:translateX(0); 15 } 16} 17 18.sec-mv { 19 position: relative; 20 width: 100%; 21 height: 100vh; 22} 23.list-mv li { 24 opacity: 0; 25 visibility: hidden; 26 position: absolute; 27 top: 0; 28 left: 0; 29 right: -40px; 30 bottom: 0; 31 overflow: hidden; 32 margin: auto; 33} 34.list-mv li.current { 35 transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1); 36 opacity: 1; 37 visibility: visible; 38 z-index: 0; 39 transform: rotate(0.0001deg); 40 outline: 1px solid transparent; 41 backface-visibility: hidden; 42} 43 44.list-mv li:nth-of-type(1).current, 45.list-mv li:nth-of-type(3).current { 46 animation: slide-left 5s linear forwards; 47} 48.list-mv li:nth-of-type(2).current, 49.list-mv li:nth-of-type(4).current { 50 animation: slide-right 5s linear forwards; 51} 52 53.list-mv li:nth-of-type(1) { 54 background: url("../image/adam-winger-3nBzt3Jdeh4-unsplash.jpg") center center no-repeat; 55 background-size: cover; 56} 57.list-mv li:nth-of-type(2) { 58 background: url("../image/ashkan-forouzani-wRufXGaO8ok-unsplash.jpg") center center no-repeat; 59 background-size: cover; 60} 61.list-mv li:nth-of-type(3) { 62 background: url("../image/guus-baggermans-cg599DTeS8w-unsplash.jpg") center center no-repeat; 63 background-size: cover; 64} 65.list-mv li:nth-of-type(4) { 66 background: url("../image/henry-co-GkuZdv11Gfo-unsplash.jpg") center center no-repeat; 67 background-size: cover; 68} 69
js
1$(function() { 2 var $body = $('body'); 3 var $win = $(window); 4 var $winHeight = Math.floor($win.height()); 5 var $winWidth = Math.floor($win.width()); 6 7 $.fn.slidemv = function() { 8 var $mv = this; 9 var $list_mv = $('#js-list-mv'); 10 var current = 0; 11 var length = $list_mv.find('li').length; 12 var timerId = null; 13 var first_flg = true; 14 var delay = 5000; 15 var touchmove_flg = false; 16 17 function autoChangeDevice() { 18 current++; 19 if (current >= length) { 20 current = 0; 21 } 22 23 setDevice(); 24 } 25 26 function setDevice() { 27 clearInterval(timerId); 28 timerId = null; 29 $list_mv.find('li').removeClass('current').eq(current).addClass('current'); 30 timerId = setInterval(autoChangeDevice, delay); 31 } 32 33 function screenTest() { 34 clearInterval(timerId); 35 timerId = setInterval(autoChangeDevice, delay); 36 setDevice(); 37 } 38 screenTest(); 39 } 40 41 $win.on('resize load', function() { 42 $winHeight = Math.floor($win.height()); 43 $winWidth = Math.floor($win.width()); 44 }) 45 46 if (ua.Mobile) { 47 $.fn.fullmv = function() { 48 var $mv = $(this); 49 function resizeMv() { 50 $mv.css({ 51 width: $winWidth, 52 height: $winHeight 53 }); 54 } 55 $win.on('resize', resizeMv); 56 resizeMv(); 57 } 58 $win.on('load', function() { 59 $('#sec-mv').fullmv(); 60 }); 61 } 62});
試したこと
currentクラスを手動で書くと、1枚目の画像はうまくいくのですが
2枚目に切り替わらないです。
各ファイルも読み込まれていると思うのですが。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー