HTML画像の切り替えとテキストのスクロールは相互に影響します。。。 _html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML画像の切り替えとテキストのスクロールは相互に影響します。。。 _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:45 AM

HTML JavaScript CSS 画像切り替えウェブ

私が作成したウェブサイトのホームページにはテキストスクロールモジュールがあり、画像切り替えモジュールもあります。画像切り替えコードはオンラインで見つけ、テキストスクロールは自分で書きました。次のコードをコピーして貼り付けて使用できます。 2 つのモジュールが相互に影響を与えるという問題があり、画像切り替えモジュールが画像を切り替えると、テキストのスクロールがしばらく停止してしまい、非常にイライラします。解決してください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片幻灯切换</title><style type="text/css">#ibanner { position:relative; width:280px; height:200px; overflow:hidden; margin:0; padding:0; }#ibanner_pic {}#ibanner_pic a { position:absolute; top:0px; border:0px #FFF; display:block; width:280px; height:200px; overflow:hidden; margin:0px; padding:0; }#ibanner_btn { position:absolute; z-index:9999; right:5px; bottom:5px; font-weight:700; font-family:Arial; }#ibanner_btn span { display:block; float:left; margin-left:4px; padding:0 5px; background:#000; cursor:pointer; }#ibanner_btn .normal { height:20px; margin-top:8px;  color:#999; font-size:16px; line-height:20px; }#ibanner_btn .current { height:28px;  color:#FF5300; font-size:28px; line-height:28px; }</style><script type="text/javascript">function $(id) { return document.getElementById(id); }function addLoadEvent(func){var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function(){oldonload();func();}}}function addBtn() {if(!$('ibanner')||!$('ibanner_pic')) return;var picList = $('ibanner_pic').getElementsByTagName('a');if(picList.length==0) return;var btnBox = document.createElement('div');btnBox.setAttribute('id','ibanner_btn');var SpanBox ='';for(var i=1; i<=picList.length; i++ ) {var spanList = '<span class="normal">'+i+'</span>';SpanBox += spanList;}btnBox.innerHTML = SpanBox;$('ibanner').appendChild(btnBox);$('ibanner_btn').getElementsByTagName('span')[0].className = 'current';for (var m=0; m<picList.length; m++){var attributeValue = 'picLi_'+mpicList[m].setAttribute('id',attributeValue);}}function moveElement(elementID,final_x,final_y,interval) {if (!document.getElementById) return false;if (!document.getElementById(elementID)) return false;var elem = document.getElementById(elementID);if (elem.movement) {clearTimeout(elem.movement);}if (!elem.style.left) {elem.style.left = "0px";}if (!elem.style.top) {elem.style.top = "0px";}var xpos = parseInt(elem.style.left);var ypos = parseInt(elem.style.top);if (xpos == final_x && ypos == final_y) {moveing = false;return true;}if (xpos < final_x) {var dist = Math.ceil((final_x - xpos)/10);xpos = xpos + dist;}if (xpos > final_x) {var dist = Math.ceil((xpos - final_x)/10);xpos = xpos - dist;}if (ypos < final_y) {var dist = Math.ceil((final_y - ypos)/10);ypos = ypos + dist;}if (ypos > final_y) {var dist = Math.ceil((ypos - final_y)/10);ypos = ypos - dist;}elem.style.left = xpos + "px";elem.style.top = ypos + "px";var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";elem.movement = setTimeout(repeat,interval);}function classNormal() {var btnList = $('ibanner_btn').getElementsByTagName('span');for (var i=0; i<btnList.length; i++){btnList[i].className='normal';}}function picZ() {var picList = $('ibanner_pic').getElementsByTagName('a');for (var i=0; i<picList.length; i++){picList[i].style.zIndex='1';}}var autoKey = false;function iBanner() {if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')) return;$('ibanner').onmouseover = function(){autoKey = true};$('ibanner').onmouseout = function(){autoKey = false};var btnList = $('ibanner_btn').getElementsByTagName('span');var picList = $('ibanner_pic').getElementsByTagName('a');if (picList.length==1) return;picList[0].style.zIndex='2';for (var m=0; m<btnList.length; m++){btnList[m].onmouseover = function() {for(var n=0; n<btnList.length; n++) {if (btnList[n].className == 'current') {var currentNum = n;}}classNormal();picZ();this.className='current';picList[currentNum].style.zIndex='2';var z = this.childNodes[0].nodeValue-1;picList[z].style.zIndex='3';if (currentNum!=z){picList[z].style.left='650px';moveElement('picLi_'+z,0,0,10);}}}}setInterval('autoBanner()', 5000);function autoBanner() {if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')||autoKey) return;var btnList = $('ibanner_btn').getElementsByTagName('span');var picList = $('ibanner_pic').getElementsByTagName('a');if (picList.length==1) return;for(var i=0; i<btnList.length; i++) {if (btnList[i].className == 'current') {var currentNum = i;}}if (currentNum==(picList.length-1) ){classNormal();picZ();btnList[0].className='current';picList[currentNum].style.zIndex='2';picList[0].style.zIndex='3';picList[0].style.left='650px';moveElement('picLi_0',0,0,10);} else {classNormal();picZ();var nextNum = currentNum+1;btnList[nextNum].className='current';picList[currentNum].style.zIndex='2';picList[nextNum].style.zIndex='3';picList[nextNum].style.left='650px';moveElement('picLi_'+nextNum,0,0,10);}}addLoadEvent(addBtn);addLoadEvent(iBanner);</script></head><body><div id="ibanner"><div id="ibanner_pic"><a href="/jscss/"><img src="/static/imghwm/default1.png"  data-src="http://su.bdimg.com/static/skin/img/logo_white.png"  class="lazy"    style="max-width:90%"   alt="" /></a><a href="/sort/index.shtml"><img src="/static/imghwm/default1.png"  data-src="http://su.bdimg.com/static/skin/img/logo_white.png"  class="lazy"    style="max-width:90%"  alt="" /></a><a href="/other/lastupdate.shtml"><img src="/static/imghwm/default1.png"  data-src="http://su.bdimg.com/static/skin/img/logo_white.png"  class="lazy"    style="max-width:90%"  alt="" /></a><a href="/other/top100.shtml"><img src="/static/imghwm/default1.png"  data-src="http://su.bdimg.com/static/skin/img/logo_white.png"  class="lazy"    style="max-width:90%"  alt="" /></a></div></div>      <marquee onMouseOver="this.stop()" onMouseOut="this.start()" id="mar" direction="left" width="870px" height="42px" style="font-size:24px; line-height:42px;" scrolldelay=0 scrollamount=4 >      图片切换在上面的div里adsasdadadasdasdsaddjjjjjjjjjjjjjjjjjjjjjjjjjaskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkklllllllllllllllll这是要滚动的文字      </marquee>  </body></html>

を使用して、片方が固まる、もう片方が固まるという問題ですが、GoogleとFirefoxでは問題なく正常に表示されます。
皆さん、新しいメモ帳を作成し、そこにコードをコピーし、html として保存すれば問題ありません。画像のパスをネットワーク画像に変更しました。直接実行します。
または、既製のモジュールを持っている人がいたら、2 つのモジュールが相互に影響を及ぼさないように私に送ってください。ありがとうございます

ディスカッション (解決策) に返信してください

どうすれば変更できますか? ?

誰にでも共有してください

marquee によって作成されたスクロール効果は理想的ではありません
ポスターがより多くのスクロール、タブ、その他のモジュールを使用する場合は
プラグイン msclass.js をお勧めします

marquee が作成しました。スクロール効果は理想的ではありません
ポスターがさらにスクロール、タブ、その他のモジュールを使用する場合は msclass.js プラグインをお勧めします
それ以外の場合は質問できません

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

See all articles