jQuery:プラグイン:bxSlider
bxslider:完成版にリンク
jQuery Content Slider | Responsive jQuery Slider | bxSlider:本家サイト
jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ! | Web Design Magazine:参考サイト
★ダウンロードしたcss内の、ファイルのリンク位置を、自分のフォルダの階層や名前と一致させる
★画像はulでリスト化し、ul class="bxslider" と名付ける
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>bxslider</title> <link rel="stylesheet" href="css/bxslider01.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="js/jquery-1.12.1.min.js"></script> <!--順番に気をつける--> <script src="js/jquery.bxslider.js"></script> <!-- ダウンロードしたjs--> <script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, autoControls: true }); }); // 参照:http://bxslider.com/ </script> </head> <body> <ul class="bxslider"> <li><img src="img/01.png" alt="#"></li> <li><img src="img/02.png" alt="#"></li> <li><img src="img/03.png" alt="#"></li> </ul> </body> </html>
※自分で書いたcssは、resetのみ使用