初めまして、javascriptを仕事で扱うようになり勉強してます。
こちら利用するのが初めてなので何か不備がありましたらご指摘お願いします。
目的は以下のスライダーを自動再生する事です。
https://marcbuils.github.io/Flippage/
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
エラーは出てませんが、目的の動作もしない状況です。 btnclickにあるalert('Hello');は動作するが ボタンをクリックさせてスライドをさせる動きができません。
該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <title>FlipPage</title> <!-- jQuery --> <script src="../jquery.min.js"></script> <!-- Flippage --> <script src="../jquery.flippage.min.js"></script> <link href="../jquery.flippage.css" type="text/css" rel="stylesheet" /> <style> body > div { display: block; margin-left: 50px; margin-top: 50px; } .exemples > div { background-color: white; } </style> <script> (function($){ $(document).ready(function(){ $('.exemples:eq(0)').flippage({ width: 500, height: 333 }); $('.exemples:eq(1)').flippage({ width: 300, height: 150 }); }); })(jQuery); function btnclick(){ document.getElementById('test').click; // alert('Hello'); } function startInterval(){ var intervalId = setInterval('btnclick()', 5000); } </script> </head> <body> <h1>Page d'exemples d'utilisation du plugin FlipPage</h1> <div> <h2>Exemple 1</h2> <div class="exemples"> <div><img src="img/img1.jpg" style="margin-left: 0px;" /></div> <div><img src="img/img1.jpg" style="margin-left: -250px;" /></div> <div><img src="img/img2.jpg" style="margin-left: 0px;" /></div> <div><img src="img/img2.jpg" style="margin-left: -250px;" /></div> <div><img src="img/img3.jpg" style="margin-left: 0px;" /></div> <div><img src="img/img3.jpg" style="margin-left: -250px;" /></div> <div><img src="img/img4.jpg" style="margin-left: 0px;" /></div> <div><img src="img/img4.jpg" style="margin-left: -250px;" /></div> <div><img src="img/img5.jpg" style="margin-left: 0px;" /></div> <div><img src="img/img5.jpg" style="margin-left: -250px;" /></div> <div><img src="img/img6.jpg" style="margin-left: 0px;" /></div> <div><img src="img/img6.jpg" style="margin-left: -250px;" /></div> </div> <div><!-- <a href="#" onclick="$('.exemples:eq(0)').trigger('previous'); return false;">Previous</a> --> - <a href="#" id="test" onclick="javascript:$('.exemples:eq(0)').trigger('next'); startInterval();">Next</a></div> </div> <div> <h2>Exemple 2</h2> <div class="exemples"> <div><h3>Page 1</h3></div> <div><h3>Page 2</h3> <a href="#" onclick="alert('Pages are clickable !'); return false;">Test me</a></div> <div><h3>Page 3</h3></div> <div><h3>Page 4</h3></div> <div><h3>Page 5</h3></div> <div><h3>Page 6</h3></div> <div><h3>Page 7</h3></div> <div><h3>Page 8</h3></div> </div> </div> </body> </html>
試したこと
btnclickの方にalert('Hello');を入れて5秒間隔で動作するのは確認できました。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/03 00:24