カルーセルでSyntaxErrorが起こります。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> <script src="carousel.js"></script> <div class="imgArea" 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> </div> </body> </html>
と書き、carousel.jsに
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(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); }; }); }); </script>
と書いて実行すると
Uncaught SyntaxError: Unexpected token < とcarousel.js:2でエラーが出ました。
http://black-flag.net/jquery/20120111-3643.html を参考にして、idやjsの構造もそっくりそのまま書いているので、なぜこれでエラーが出るのかわかりません。余分な<がcarousel.jsに入っているとも思えません。
どう直せば良いのでしょうか?
回答1件
あなたの回答
tips
プレビュー