Q&A
JavaScript を書いたソースが見当たらないようですが？
前提・実現したいこと
JavaScriptでhttps://www.nhk.or.jp/kagoshima/の上部にあるような一つのタイトルに対して複数のテキストがスクロールして入れ替わる仕組みを作っています。
サイトのソースからHTML,CSS,JavaScriptをコピーして見たのですがスクロールがされず止まったままです。
コピーしたJavaScriptはhttps://www.nhk.or.jp/lcommon/js/linfo_banner.jsです
html
<div id="linfo_banner" class="pattern2" style="cursor: pointer;"><div class="inner clearfix"> <div class="title"> <div class="bx-wrapper" style="max-width: 100%; margin: 0px auto;"> <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 23px;"> <div id="title_slider23" style="width: 1615%; position: relative; transition-duration: 0s; transform: translate3d(-426px, 0px, 0px);"> <div style="float: left; list-style: none; position: relative; width: 426px;" class="bx-clone"> <span class="main">台風８号情報 </span> <span class="sub">鉄道運転見合わせ</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">概況</span></div> <div style="float: left; list-style: none; position: relative; width: 426px; "> <span class="main">台風８号情報 </span><span class="sub">暴風警報</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">最大風速</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">最大瞬間風速</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">１時間予想雨量</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">２４時間予想雨量</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">波の高さ</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">避難準備の情報</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">厳重警戒</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">警戒</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">注意</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">海の便 欠航</span> </div><div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">空の便 欠航</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;"> <span class="main">台風８号情報 </span><span class="sub">鉄道運転見合わせ</span></div> <div style="float: left; list-style: none; position: relative; width: 426px;" class="bx-clone" ><span class="main">台風８号情報 </span><span class="sub">概況</span> </div></div></div></div><!-- /#title_slider --></div><!-- /.title --> <div class="info scroll2"><div class="bx-wrapper" style="max-width: 100%; margin: 0px auto;"> <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 21px;"> <ul id="slider23" style="width: 3515%; position: relative; transition-duration: 0.5s; transform: translate3d(-1455px, 0px, 0px);"> <li style="float: left; list-style: none; position: relative; width: 485px; top:20px;" class="bx-clone">肥薩おれんじ鉄道（川内～八代）</li> <li style="float: left; list-style: none; position: relative; width: 485px;">強い台風８号が宮崎県に接近中 明け方にも上陸か</li> <li style="float: left; list-style: none; position: relative; width: 485px;">大隅の一部が暴風域に入る</li> <li style="float: left; list-style: none; position: relative; width: 485px;top:20px;">薩摩・大隅 これから大荒れの天気になるおそれ</li> <li style="float: left; list-style: none; position: relative; width: 485px;">日置市 いちき串木野市 阿久根市 長島町 薩摩川内市</li> <li style="float: left; list-style: none; position: relative; width: 485px;">甑島 枕崎市 指宿市 南さつま市 南九州市</li> <li style="float: left; list-style: none; position: relative; width: 485px;">志布志市 曽於市 鹿屋市 垂水市 大崎町 錦江町</li> <li style="float: left; list-style: none; position: relative; width: 485px;">東串良町 南大隅町 肝付町</li> <li style="float: left; list-style: none; position: relative; width: 485px;">出水市 霧島市 伊佐市 姶良市 さつま町 湧水町</li> <li style="float: left; list-style: none; position: relative; width: 485px;">薩摩・大隅地方 ２０～２５メートル</li> <li style="float: left; list-style: none; position: relative; width: 485px;">種子島・屋久島地方 ２０～２５メートル</li> <li style="float: left; list-style: none; position: relative; width: 485px;">薩摩・大隅地方 ３０～３５メートル</li> <li style="float: left; list-style: none; position: relative; width: 485px;">種子島・屋久島地方 ３０～３５メートル</li> <li style="float: left; list-style: none; position: relative; width: 485px;">大隅地方 ８０ミリ 薩摩地方 ６０ミリ</li> <li style="float: left; list-style: none; position: relative; width: 485px;">大隅地方 ２５０ミリ（～６日夜）</li> <li style="float: left; list-style: none; position: relative; width: 485px;">薩摩地方 １８０ミリ（～６日夜）</li> <li style="float: left; list-style: none; position: relative; width: 485px;">大隅地方 ８メートル 種子島・屋久島地方 ６メートル</li> <li style="float: left; list-style: none; position: relative; width: 485px;">薩摩地方 ４メートル</li> <li style="float: left; list-style: none; position: relative; width: 485px;">霧島市全域 姶良市全域 曽於市全域 </li> <li style="float: left; list-style: none; position: relative; width: 485px;">垂水市全域 大崎町全域 湧水町全域</li> <li style="float: left; list-style: none; position: relative; width: 485px;">土砂災害 低い土地の浸水 河川の氾濫</li> <li style="float: left; list-style: none; position: relative; width: 485px;">暴風 うねり伴った高波</li> <li style="float: left; list-style: none; position: relative; width: 485px;">竜巻などの激しい突風</li> <li style="float: left; list-style: none; position: relative; width: 485px;">高速船甑島 フェリーニューこしき フェリー太陽</li> <li style="float: left; list-style: none; position: relative; width: 485px;">はいびすかす フェリーさんふらわあ（志布志～大阪）</li> <li style="float: left; list-style: none; position: relative; width: 485px;">桜島フェリー</li> <li style="float: left; list-style: none; position: relative; width: 485px;">日本エアコミューター９便 日本航空３便</li> <li style="float: left; list-style: none; position: relative; width: 485px;">ジェットスター２便 スカイマーク１便</li> <li style="float: left; list-style: none; position: relative; width: 485px;">ピーチアビエーション２便</li> <li style="float: left; list-style: none; position: relative; width: 485px;">ＪＲ吉都線（都城～吉松）</li> <li style="float: left; list-style: none; position: relative; width: 485px;">ＪＲ日豊本線（幸崎～国分）</li> <li style="float: left; list-style: none; position: relative; width: 485px;">ＪＲ肥薩線（隼人～八代）</li> <li style="float: left; list-style: none; position: relative; width: 485px;">ＪＲ日南線（志布志～南宮崎）</li> <li style="float: left; list-style: none; position: relative; width: 485px;">肥薩おれんじ鉄道（川内～八代）</li> <li style="float: left; list-style: none; position: relative; width: 485px;" class="bx-clone">強い台風８号が宮崎県に接近中 明け方にも上陸か</li></ul> </div></div></div><!-- /.info --> <div class="linkBtn"><a data-tgt="modal">リンク</a></div></div><!-- /.inner .clearfix --></div>
一応https://www.nhk.or.jp/lcommon/js/linfo_banner.jsをまるまるコピーしました
HTML 内に、JavaScript を読み込んでいる部分がない、のは書き忘れ？
そうです。
書き忘れ＝実コードにはあるけどteratailに書かなかっただけ OR 実コードにも書いていない どちらでしょう
実際のコードには書かれています。
止まったまま＝javaScriptが動いていない＝デベロッパーツールとかでみたときにconsoleにエラーでてないんですか？
Uncaught ReferenceError: $ is not defined
at index.html:370
title_bg1.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
linfo_arrow.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
と出てます。
まぁそりゃ全部コピペでキレイに動くわけないですよねー。
質問文にそのエラー追記したらよいと思います。
あとコピペしたJSは一つだけとおっしゃっていますが、このサイトは十数個のJSが使われています。
ほんとにそのJSだけでスライドの記述をしていますか？
あとHTMLもすんごい中途半端ですけど、HTMLに記述してある＜script>タグの中身とかも書いてますか？今のままじゃ誰も回答してくれないです
https://www.nhk.or.jp/lcommon/js/linfo_banner.js を丸ごとコピーして使う事を、NHKは承諾しているのでしょうか。
未承諾であれば、NHKに問い合わせる事から始めて下さい。
https://www.nhk.or.jp/kagoshima/contact/
最初のReferenceError解決するだけならjQuery本体だけ読み込めば終わりですけど。
think49さん
オフラインで改変して使う分には許可は要らないと思います。
また、質問文に記載する行為は適切な引用の範囲に当たると思います。
あなたの回答
tips
プレビュー
