カルーセルの中身がなくなってしまいます。
http://black-flag.net/jquery/20120111-3643.html を参考にして作っています。
htmlに
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="home.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> <div class="menu" id="menu"> <h2 class="title first">SITE</h2> <ul class=""> <li><a class="home" href="">Home</a> </li> <li><a class="profile" href="">Detail</a> </li> </ul> </div> <script src="carousel.js"></script> <div class="imgArea float-right" id="carousel"> <ul> <li><a href="#"><img src="photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="photo2.jpg" alt="" /></a></li> </ul> </div> <script src="carousel.js"></script> </body> </html>
と書きcssに
*{ margin: 0; padding: 0; } .menu{ background-color: gray; width: 500px; height: 100%; float: left; } .title{ color:white; font-size:30px; margin: 0px 5px; margin-left: 40px; text-align: center; } .first{ padding-top:30px; } html, body, .menu { height: 100%; } body { margin: 0; } .relative { position: relative; } li{ list-style: none; } li a{ display: block; text-decoration: none; color: white; text-align: center; font-size: 20px; } li a img{ width: 100%; height: 100%; } .float-right { width: calc(100% - 500px); overflow: hidden; float: right; }
と書きcarousel.jsに
$(function(){ $('#carousel').each(function(){ var slideTime = 500; var delayTime = 5000; var carouselWidth = $(this).width(); var carouselHeight = $(this).height(); $(this).append('<div id="carousel_prev"></div><div id="carousel_next"></div>'); $(this).children('ul').wrapAll('<div id="carousel_wrap"><div id="carousel_move"></div></div>'); $('#carousel_wrap').css({ width: (carouselWidth), height: (carouselHeight), position: 'relative', overflow: 'hidden' }); var listWidth = parseInt($('#carousel_move').children('ul').children('li').css('width')); var listCount = $('#carousel_move').children('ul').children('li').length; var ulWidth = (listWidth)*(listCount); $('#carousel_move').css({ top: '0', left: -(ulWidth), width: ((ulWidth)*3), height: (carouselHeight), position: 'absolute' }); $('#carousel_wrap ul').css({ width: (ulWidth), float: 'left' }); $('#carousel_wrap ul').each(function(){ $(this).clone().prependTo('#carousel_move'); $(this).clone().appendTo('#carousel_move'); }); carouselPosition(); $('#carousel_prev').click(function(){ clearInterval(setTimer); $('#carousel_move:not(:animated)').animate({left: '+=' + (listWidth)},slideTime,function(){ carouselPosition(); }); timer(); }); $('#carousel_next').click(function(){ clearInterval(setTimer); $('#carousel_move:not(:animated)').animate({left: '-=' + (listWidth)},slideTime,function(){ carouselPosition(); }); timer(); }); function carouselPosition(){ var ulLeft = parseInt($('#carousel_move').css('left')); var maskWidth = (carouselWidth) - ((listWidth)*(listCount)); if(ulLeft == ((-(ulWidth))*2) || ulLeft == ((-(ulWidth))*2)+1) { $('#carousel_move').css({left:-(ulWidth)}); } else if(ulLeft == 0) { $('#carousel_move').css({left:-(ulWidth)}); }; }; timer(); function timer() { setTimer = setInterval(function(){ $('#carousel_next').click(); },delayTime); }; }); });
と書いて実行すると、しばらくするとカルーセルの画像が空になってしまいます。カルーセルの中身を無限に回し続けるコードが足りないのでしょうか?なぜ中身の画像がなくなってしまうのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。