グローバル変数でなく関数スコープ(ローカル変数)を用いてスライドショーを実装したいと考えてます。
var pages = [], num = 0, pagesNum = 0;
上の3行をグローバルに宣言した変数にすれば動作できるのですが、下のindex.htmlのようにローカルで閉じ込めると以下のエラーがでてしまいます。
Uncaught TypeError: pages.push is not a function at slide (index.html:49) at HTMLButtonElement.<anonymous> (index.html:58) at HTMLButtonElement.dispatch (jquery.js:3058) at HTMLButtonElement.eventHandle (jquery.js:2676) slide @ index.html:49 (anonymous) @ index.html:58 dispatch @ jquery.js:3058 eventHandle @ jquery.js:2676
どんなコードを書けば良いか教えていただけると非常に嬉しいです。
参考にした記事です。
以下に私が書いたindex.htmlとstyle.cssになります。
グローバル変数を用いないという条件であれば、コードをこう書いたほうが良いというアドバイスをいただけたら非常に嬉しいです。
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <div class="slider-wrap"> <div class="slider-area"> <ul class="slider-list clearfix"> <li><img src="http://placehold.jp/150x150.png" alt=""></li> <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li> <li><img src="http://placehold.jp/150x150.png" alt=""></li> <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li> </ul> <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button> <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button> </div> </div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> "use strict"; $(function() { (function(){ var pages = [], num = 0, pagesNum = 0; })(); function slide(pages, num, pagesNum){ for(var i = 0; i < $('.slider-list li').length; i++){ if (i == 0) { pages.push(0); } else { num += - $('.slider-list li').eq(i).width(); pages.push(num); } } } $('.slider-ctrl-btn').on('click', function(){ slide(pages, num, pagesNum); if ($(this).data('ctrl') === 'next') { var step = 1; pagesNum = pagesNum + step; if (pagesNum === pages.length) { pagesNum = 0; } $(".slider-list").animate({left: pages[pagesNum]},500)} else if ($(this).data('ctrl') === 'prev') { var back = -1; pagesNum = pagesNum + back; if (pagesNum === -1) { pagesNum = pages.length - 1; } $(".slider-list").animate({left: pages[pagesNum]},500)} }); }); </script> </body> </html>
style.css
.slider-wrap { width: 600px; padding: 10px; margin: 0 auto; border-radius: 10px; background-color: #DDD; box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4); } .slider-area { position: relative; width: 600px; height: 300px; background-color: #FFF; overflow: hidden; } .slider-list { position: absolute; top: 0; left: 0; width: 2400px; height: 300px; } .slider-list > li { float: left; } .slider-ctrl-btn { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; cursor: pointer; border-radius: 15px; background-color: rgba(255, 255, 255, 0.5); } .slider-ctrl-btn.prev { left: 30px; } .slider-ctrl-btn.next { right: 30px; } コード
回答1件
あなたの回答
tips
プレビュー