Home >Web Front-end >HTML Tutorial >div css javascript revolving image rotation display_html/css_WEB-ITnose
div css javascript revolving image rotation display_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:27:061516browse
The effect is as shown below
<!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=gb2312" /><title>图片滚动</title></head><body><style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width:500px; } #demo img { border:3px solid #F2F2F2; } #indemo { float:left; width:800%; } #demo1 { float:left; } #demo2 { float:left; } --></style> <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="http://www.trip-j.net/images/hotelimg/6614/200811201335594038.jpg" border="0" /></a> <a href="#"><img src="http://www.trip-j.net/images/hotelimg/2457/20081061952145229.jpg" border="0" /></a> <a href="#"><img src="http://www.trip-j.net/images/hotelimg/2574/20081091921231611.jpg" border="0" /></a> <a href="#"><img src="http://www.trip-j.net/images/hotelimg/2395/20081062005358398.jpg" border="0" /></a> <a href="#"><img src="http://www.trip-j.net/images/hotelimg/3564/20081191214549634.jpg" border="0" /></a> <a href="#"><img src="http://www.trip-j.net/images/hotelimg/3129/20081091715454669.jpg" border="0" /></a> </div> <div id="demo2"></div> </div></div><script><!--var speed=10;var tab=document.getElementById("demo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("demo2");tab2.innerHTML=tab1.innerHTML;function Marquee(){if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidthelse{tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};--></script></body></html>
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：div css fixed in browser_html/css_WEB-ITnoseNext article：div css fixed in browser_html/css_WEB-ITnose