- ベストアンサー
HTML、CSS、Javaスクリプトを使用して
HTML、CSS、Javaスクリプトを使用して1つの場所に、リンク付きの画像を順番に複数表示させ、それをループさせるにはどのようにすれば良いでしょうか？
- ferrari328gtslf
- お礼率17% (5/28)
- JavaScript
- 回答数13
- ありがとう数1
- みんなの回答 （13）
- 専門家の回答
質問者が選んだベストアンサー
必要ファイルはすべてCDNからの自力取り込みです。 （外部にある、サーバーから入手しているという事） なので、貴方が用意するのは、 画像とリンクを押した後の画像のみ？となるでしょう。 技術的に、突っ込んでくれたらうれしいポイントが、 ヘッダー内で、scriptを実行しているが、 この位置ではまだ、body内のHTMLは読み込んでないんじゃないの？ ってことに気が付いてくれたら結構、「お～」だったりも＾＾ だから$で始まるんですけどね。(というか、jqueryのthisポインタ) HTMLを読み込み終わってから$が動くために 先に宣言をまとめられるという特性です。 こうすると、BODYの中は、綺麗になるのが、わかってもらえたかと。 ただ、やってることは他のサンプルをローカルで動くように しただけなので、特に私は何もしてませんけどね。 ではでは！おそくなりましたね。ごめんね～
その他の回答 (12)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
以下を、好きな名前.html などのファイルを作って、ローカルファイルにして、 それをブラウザで表示してみてください。 ------------------------------------------ <!-- https://zero-plus.io/media/jquery-slick/ このサイトの取説をローカルHTMLにしたものです。 --> <html> <head> <!-- 外部ファイル取り込み部分 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"> <style> /* IDやクラス名の間に","を使うのは、同じものを両方に設定しろという意味です */ .slide-items, .slide-items2 { width: 100%; height: 50%; } .slide-items img, .slide-items2 img { width: 100%; object-fit: cover; } </style> <!-- 個別設定スクリプト --> <script> $(function(){ /* 両方共通で、縦は画面の50%をCSS側で与えている */ /* 上の物は、横フルで表示 */ $(".slide-items").slick({ autoplay: true, // 自動再生 autoplaySpeed: 4000, // 再生速度（ミリ秒設定） 1000ミリ秒=1秒 infinite: true, // 無限スライド }); /* 下の物は、両サイドを20%分「前後のスライドを見える状態」で表示 */ $(".slide-items2").slick({ autoplay: true, // 自動再生 centerMode: true,// 前後スライドを部分表示 centerPadding: '20%',// 両端の見切れるスライド幅 }); }); </script> </head> <body> <!-- カルーセルそのものにリンクを張った例 --> <a href=.> <ul class="slide-items"> <li><img src="images/dummy1.jpg" alt=""></li> <li><img src="images/dummy2.jpg" alt=""></li> <li><img src="images/dummy3.jpg" alt=""></li> </ul> </a> <!-- カルーセルの要素にのみリンクを張った例 --> <ul class="slide-items2"> <li><a href=.><img src="images/dummy1.jpg" alt=""></a></li> <li><a href=.><img src="images/dummy2.jpg" alt=""></a></li> <li><a href=.><img src="images/dummy3.jpg" alt=""></a></li> </ul> <!-- 画像はJPEGになっているが、ブラウザが表示できる形式なら何でもいい --> </body> </html> ------------------------------------------ 手持ちの任意の画像をセットはした方が、わかりやすいので、 そこだけ、自前の物をどうぞ！ あと、コメントが <!-- ～ --> /* ～ */ // ～～ の３種類混在しており、そこは注意を！
- AsarKingChang
- ベストアンサー率46% (3467/7474)
すまん。この件忘れてた。夜にでもちょいちょい というか、サンプルを張る程度になるんだけどね。 （動く状態になってるか？程度の違いしかないとは思う）
補足
全然大丈夫です。 有難うございます。
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>申し訳ないついでに、ソースを直して頂けると有難いのですが・・・・・・ 明日でよければ＾＾やりま～す！
補足
有難うございます。 宜しくお願いいたします。
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>下記を記述すれば動くのでしょうか？ そそ。そんな感じ！ jquery その他は、headブロックの中に入れてOKですよ。 CSSが同じものが何回も入ってるので整理しつつ <div>your content</div> 要件定義が「リンク付き」なので <div><a href=アドレス>your content</a></div> これが画像に対してのリンク 全体で同じアドレスなら、divの外に置けばOKです。 などで、ローカルのHTMLで試してみると いいでしょう。 <script type="text/javascript" src="slick/slick.min.js"></script> これは、FTPなどで、アップロードして使う時の書き方なので、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> こっちみたいに、外部にあるものを取り込んで使うCDN方式にすればよいでしょう。 逆に、そんだけで、動きますよ！
補足
有難うございます。 大変申し訳ないのですが、ご教示いただいたところがよく理解できy手ません。 申し訳ないついでに、ソースを直して頂けると有難いのですが・・・・・・
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>読んで理解するまで時間が掛かりそうですが 基本、IDやCLASS えっと、 <div id=ここがID class=ここがCLASS> 構成物 </div> ってな囲いをして、プラグインを作ると、 プラグインが、指定のIDやCLASSを探して その中に、アニメーションを追加して動くよ～って 感じなので、何もしなくても動くんです。 おもに ID＝全体で1回しか使わない演出用 CLASS=全体で何回でも使う演出用 と思っていいですが、プラグインにより、 1つのページで1回しか使えない物もあれば、 何回追加してもいい物もあり、そこらへんは、 サンプルでな～んとなくわかればいい程度です。 あと、今現在jqueryを使っている場合は、 プラグインだけ追加。ない場合は、jqueryも追加。 ローカル環境でも試せるので、それで試してから マージ（公開サイトに取り入れる）してもいいでしょうね。 などで、いけますよ～！
補足
読んでみました。 ・ダウンロードした ファイルを同じ階層に置く ・リンク付き画像は4枚 として、下記を記述すれば動くのでしょうか？ <html> <head> <!--slick--> <link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick-theme.css"/> <link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick-theme.css"/> <link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick.css"/> </head> <body> <!--スライダ-の枠--> <div class="スライダーのクラス名"> <div>your content</div> <div>your content</div> <div>your content</div> </div> <!--HTML> <div class="multiple"> <div><a href="コンテンツ1"><img src="1.jpg" ></div> <div><a href="コンテンツ2"><img src="2.jpg" ></div> <div><a href="コンテンツ3"><img src="3.jpg" ></div> <div><a href="コンテンツ4"><img src="4.jpg" ></div> </div> <!--CSS--> .multiple { padding: 0;} .multiple img { width: 100%;} .multiple div { margin: 0 5px;} .multiple .slick-next { right: 17px; z-index: 100;} .multiple .slick-prev { left: 23px; z-index: 100;} <!--jQuery--> $(document).ready(function(){ $('.multiple').slick({ autoplay: true, //自動再生 infinite: true, //スライドのループ有効化 dots: true, //ドットのナビゲーションを表示 slidesToShow: 4, //表示するスライドの数 slidesToScroll: 4, //スクロールで切り替わるスライドの数 responsive: [{ breakpoint: 768, //ブレークポイントが768px settings: { slidesToShow: 3, //表示するスライドの数 slidesToScroll: 3, //スクロールで切り替わるスライドの数 } }, { breakpoint: 480, //ブレークポイントが480px settings: { slidesToShow: 2, //表示するスライドの数 slidesToScroll: 2, //スクロールで切り替わるスライドの数 } }] }); }); $(document).ready(function(){ $('.multiple').slick({ autoplay: true, //自動再生 infinite: true, //スライドのループ有効化 dots: true, //ドットのナビゲーションを表示 slidesToShow: 4, //表示するスライドの数 slidesToScroll: 4, //スクロールで切り替わるスライドの数 responsive: [{ breakpoint: 768, //ブレークポイントが768px settings: { slidesToShow: 3, //表示するスライドの数 slidesToScroll: 3, //スクロールで切り替わるスライドの数 } }, { breakpoint: 480, //ブレークポイントが480px settings: { slidesToShow: 2, //表示するスライドの数 slidesToScroll: 2, //スクロールで切り替わるスライドの数 } }] }); }); <!--script--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('スライダーのクラス名').slick({ オプション: 値 }); }); </script> </body> </html>
- AsarKingChang
- ベストアンサー率46% (3467/7474)
あ～こったことをしようとしてるわけじゃないのね。 https://www.jungleocean.com/programming/190201jquery-slick とかで気に入ったパーツを見つけて、組み込むだけでOKですし。 1個じゃなく、2個以上（種類も混ぜれる） などをしてもいいので、 一度Jquery系のライブラリを見てみると、 「あ～そんだけか！」で終わるかも。
補足
有難うございます。 読んで理解するまで時間が掛かりそうですが（目が悪いので）やってみますが、つまずいたら教えてください <(_ _)>
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>？・・・・・・というレベルです。 簡単なサンプルなら作ってあげてもいいですよ。 要件定義だけ、まとめてもらえれば。 要するに何がやりたいの？って質問に「かっこいいの！」 って答える用だと作業ができないので。。 あと、最初に言った通り、 「リンク付きの画像を切り替える」と操作性は良くないので、 リンク付きだが「画像のみを切り替える」の方がいいでしょうね。 これだけでも、大きく違います。 箱の中に絵が入っているとして、 箱の中の絵を入れ替えるのか、 箱の中に絵が入っているが箱ごと切り替えるのか？ って違い、だいぶ違うのは、わかってもらえるかと。 階層の概念を持てるのであれば、パーツとして こちらで作ってもいいですが。 パーツとしてはめ込む練習をしてみるとよいと思います。 今私が言った件以外に、世の中には多数のプラグインがあり、 それらを組み合わせてサイトを飾り付ける物なので、 ＝ここをクリアできれば、どんどんサイトをパワーアップできる！ って事ですから～ もちろん、強制なんてしませんが、お好みでどうぞ！ って所ではあります。 おまけ、他人のサイトを作ってあげるのって、 結構、いい金になりますよ。 なので、勉強自体は無駄じゃないので～す！ ではでは
補足
大変助かります！ 使用しているCMSはXoops2で、現在トップページの最上段にHTMLブロック を表示させて <a href="コンテンツ先"><img src="バナー"></a>を記述して画像を1枚表示 させています。 ここの表示バナーを4枚ほどカルーセルにしたいのです。
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>要はトップのバナーを数秒ごとに貼りかえてtループさせたいのですが、 >Xoops2のHTNLブロックにさらっと書いて実現させるには難しいですね。 いや、先ほど回答したように簡単かと思います。
補足
すみません、私自身HTMLの基本レベルなので、 サンプルうぃみてもどう扱えばよいのかわかりません。 HTML部分のの下にCSSを書いて、その下にjsを書いて1つのファイルにするのか、それぞれのファイルを作るのか、拡張子は？・・・・・・というレベルです。
- WDY
- ベストアンサー率27% (134/489)
スライダーのバナーを作りたいのかな？ 「スライダーバナー js」等で検索すると サンプルが沢山ヒットすると思います。 ＞1つの場所（1ファイル？） そのサンプルを1つのHTMLに全部書いてしまえば 1つの場所（1ファイル）にまとまると思います。 ＞1つの場所（1カ所に置いて参照？） HTML、CSS、Javaスクリプトだけ使用であれば スライダーだけのHTMLを作り 別HTMLでiframeで呼び出せば良いのでは？
- AsarKingChang
- ベストアンサー率46% (3467/7474)
ただし、UI的に >リンク付きの画像を順番に複数表示させ これは、不親切なので、 「リンク内の画像の方を順番に複数表示させる」ほうが 良いと思います。押そうと思ったら、急に変わって 違うアドレスになるような、UIでは、せっかく作ったのに！ 「使いにくさを増やす効果」の方が目立つと思います。 後は、EnjoyIt
補足
有難うございます。 要はトップのバナーを数秒ごとに貼りかえてtループさせたいのですが、 Xoops2のHTNLブロックにさらっと書いて実現させるには難しいですね。
- 1
- 2
お礼