質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1184閲覧

画像切り替えについて

YuusukeArtRoom

総合スコア23

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2021/03/14 14:36

編集2021/03/15 02:08

http://kenpicopico.starfree.jp/kenpicopico_diary/929/
http://kenpicopico.site/?p=929

こちらのサイトの表示方法で複数枚の写真を切り替えたいのですが
どうすれば良いかわかる方がいましたらヒントを教えていただけるとありがたいです。

https://www.net-marketing.co.jp

こちらのサイトの画像のスライド方法です!

ソースコードを見てみたところ以下のようになっていました。
コードを見てみたところ上のようになっていました。
どうすれば実装できるかを教えていただきたいです。

scriptは読めるのですが、動作しないため何が足りないかわからずに質問させてもらいました。

<article class="topWhat mb150 col-12 col-sm-12 col-md-12 col-lg-12 "> <div class="topWhat__bg--img"> <ul> <li style="z-index: 975; width: 100vw;"><span style="width: 1604px; transform: translate(0px, -122.166px);"></span></li> <li style="display: list-item; z-index: 976; width: 99.878%;"><span style="width: 1604px; transform: translate(0px, -122.166px);"></span></li> <li style="display: list-item; z-index: 974; width: 100%;"><span style="width: 1604px; transform: translate(0px, -122.166px);"></span></li> </ul> </div>   </article>
$(function() { //what's nM slider function nmAnimation() { var animeID = 0; var zindex = 0; function mediaSlideMove(){ zindex++; var $elm = $('.topWhat .topWhat__bg--img li').eq(animeID); $elm.show().css({'z-index': zindex}); gsap.fromTo($elm, 1.2, { width : '0%'}, { width: '100%', ease: "power4.inOut", onComplete: function(){ }}); } function mediaSlideSet(){ if(animeID >= 2) { animeID = 0; } else { animeID++; } mediaSlideMove(); } reasonInterval = setInterval(mediaSlideSet,3500); } });
.topWhat { padding-bottom: 73px; background-color: rgba(255, 255, 0, 0); } .topWhat .gridContents { padding-right: 20px; } .topWhat .topWhat__bg--img { height: 480px; } .topWhat .topWhat__bg--img ul{ height: 400px; } .topWhat .topWhat__bg--img ul li{ height: 400px; } .topWhat .topWhat__bg--img ul li > span{ height: 400px; } .topWhat .topWhat__bg--img ul li:nth-child(1) span { background-image: url("/image/sl1.jpg"); background-size: cover; background-position: center center; } .topWhat .topWhat__bg--img ul li:nth-child(2) span { background-image: url("/image/sl2.jpg"); background-size: cover; background-position: center center; } .topWhat .topWhat__bg--img ul li:nth-child(3) span { background-image: url("/image/sl3.jpg"); background-size: cover; background-position: center center; } .topWhat .topWhat__title { top: 30px; font-size: 30px; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

K_3578

2021/03/15 01:34

とりあえず内容見る前に一点だけ。外部サイトのURLは「リンクの挿入」を押して出てくる [リンク先の内容](URL) という型で提示してくれると1クリックでジャンプできるので編集頂きたいです。
YuusukeArtRoom

2021/03/15 01:42

編集しました、よろしくお願いします
Lhankor_Mhy

2021/03/15 01:59

jQuery や gsap は読み込んでいますか?
K_3578

2021/03/15 02:41

コピペして使うにしても書いてある事の意味が分からなかったら何の成長にもならないと 思うので動かしてみてコード削ったりして内容の理解に取り組んで頂ければ宜しいかと思います。
guest

回答2

0

ベストアンサー

パクり方が足りないと思います。
とりあえず、liのstyle属性削って、不足してたCSSをコピペしたら動きました。

サンプル

投稿2021/03/15 02:22

Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YuusukeArtRoom

2021/03/15 02:41

ありがとうございます。また何かありましたらご教授願います
guest

0

初めまして。webデザインを趣味とするものでございます。
「どうすればよいか」とは何がわからないのでしょうか。
どこどこに困っているなど、”何がわからないか”を的確に質問文へ記入してくださるとよいと思います。

投稿2021/03/14 23:26

webdezainn

総合スコア50

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YuusukeArtRoom

2021/03/15 01:29

コードを見てみたところ上のようになっていました。 どうすれば実装できるかを教えていただきたいです。 scriptは読めるのですが、動作しないため何が足りないかわからずに質問させてもらいました。
K_3578

2021/03/15 01:30

質問の回答になっていないので低評価しています。 この内容は追記・修正依頼の欄に書くべき内容かと。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問