検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML画像の切り替えとテキストのスクロールは相互に影響します。 。 。 _html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-21 09:45:391575ブラウズ

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 style="width:280px; height:200px; margin-left:-2px; margin-top:-2px;"  src="http://su.bdimg.com/static/skin/img/logo_white.png" alt="" /></a><a href="/sort/index.shtml"><img style="width:280px; height:200px; margin-left:-2px; margin-top:-2px;" src="http://su.bdimg.com/static/skin/img/logo_white.png" alt="" /></a><a href="/other/lastupdate.shtml"><img style="width:280px; height:200px; margin-left:-2px; margin-top:-2px;" src="http://su.bdimg.com/static/skin/img/logo_white.png" alt="" /></a><a href="/other/top100.shtml"><img style="width:280px; height:200px; margin-left:-2px; margin-top:-2px;" src="http://su.bdimg.com/static/skin/img/logo_white.png" 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 までご連絡ください。
前の記事：css3 3D 回転がギザギザに見える_html/css_WEB-ITnose次の記事：css3 3D 回転がギザギザに見える_html/css_WEB-ITnose

関連記事

続きを見る