search

Home >Web Front-end >HTML Tutorial >HTML image switching and text scrolling affect each other. _html/css_WEB-ITnose

HTML image switching and text scrolling affect each other. _html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:02:001529browse

There is a text scrolling module on the homepage of the website I made, and there is also a picture switching module. The picture switching is the code I found online, and the text scrolling was written by myself. You can copy and paste the following code to use. There is such a problem that these two modules affect each other. When the picture switching module switches pictures, my text scrolling stops for a while and I am very depressed. Please help me solve it. 

<!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>

You can find it using IE or Sogou browser. One lag after another, Google and Firefox have no problem and display normally.
Everyone, create a new notepad, copy the code into it, save it as html, and it will be ok. I changed the image path to a network image. Run directly.
Or if anyone has a ready-made one, please send it to me. Just ask that the two modules do not affect each other. Thank you


Reply to the discussion (solution)

How to change it? ?

Share it with whoever comes up

The scrolling effect made by marquee is not ideal.
If the poster will use more scrolling, tab and other modules.
Here you go Recommend a plug-in msclass.js

The scrolling effect produced by marquee is not ideal.
If the poster will use more scrolling, tab and other modules.
Recommend one to you Plug-in msclass.js


I’ve given it to you, otherwise I wouldn’t be able to ask questions

Sir, have you solved it? Also share

Has this problem been solved? I've encountered it too, and I'm confused. . . . . .

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Please help me modify the code_html/css_WEB-ITnoseNext article：Please help me modify the code_html/css_WEB-ITnose

Related articles

See more