Heim > Artikel > Web-Frontend > DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose
DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:27:141058Durchsuche
（含上下左右滚动代码）<!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><title></title><style type="text/css"><!--UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-POSITION: outside; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; overflow: hidden;}#S_LIST LI { width:154px; height:auto; float:left; padding: 0px; margin: 0px; list-style-image: none; list-style-type: none;}#S_LIST A { DISPLAY: block; MARGIN: 0px; WIDTH: 154px; HEIGHT: auto; TEXT-ALIGN: center; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px;}#demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 930px; height:180px;}#demo img {border: 1px solid #F2F2F2;}#indemo {float: left;width: 800%;}#demo1 { float: left;}#demo2 {float: left;}--></style></head><body><div id="demo"><div id="indemo"><div id="demo1"> <ul id="S_LIST"> <li><a href="#"><img src="1.jpg" style="max-width:90%" style="max-width:90%" border="0" / alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ></a> <a href="#" >1</a></li> <li><a href="#"><img src="2.jpg" style="max-width:90%" style="max-width:90%" border="0" / alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ></a> <a href="#" >2</a></li> <li><a href="#"><img src="3.jpg" style="max-width:90%" style="max-width:90%" border="0" / alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ></a> <a href="#" >3</a></li> <li><a href="#"><img src="4.jpg" style="max-width:90%" style="max-width:90%" border="0" / alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ></a> <a href="#" >4</a></li> <li><a href="#"><img src="5.jpg" style="max-width:90%" style="max-width:90%" border="0" / alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ></a> <a href="#" >5</a></li> <li><a href="#"><img src="6.jpg" style="max-width:90%" style="max-width:90%" border="0" / alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ></a> <a href="#" >6</a></li> <li><a href="#"><img src="7.jpg" style="max-width:90%" style="max-width:90%" border="0" / alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ></a> <a href="#" >7</a></li> <li><a href="#"><img src="8.jpg" style="max-width:90%" style="max-width:90%" border="0" / alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ></a> <a href="#" >8</a></li> <li><a href="#"><img src="9.jpg" style="max-width:90%" style="max-width:90%" border="0" / alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ></a> <a href="#" >9</a></li></ul></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>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 上下滚动代码：<div id="demo" style="overflow:hidden;height:500px;width:120px; border:1px solid #dde5bc; overflow:hidden;float:left"><div id=demo1> <img src="images/js01.gif" style="max-width:90%" style="max-width:90%" alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ><img src="images/js02.gif" style="max-width:90%" style="max-width:90%" alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" > <img src="images/js03.gif" style="max-width:90%" style="max-width:90%" alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ><img src="images/js04.gif" style="max-width:90%" style="max-width:90%" alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ><img src="images/js05.gif" style="max-width:90%" style="max-width:90%" alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ><img src="images/js06.gif" style="max-width:90%" style="max-width:90%" alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ><img src="images/js07.gif" style="max-width:90%" style="max-width:90%" alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ><img src="images/js08.gif" style="max-width:90%" style="max-width:90%" alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ><img src="images/js09.gif" style="max-width:90%" style="max-width:90%" alt="DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码_html/css_WEB-ITnose" ></div><div id=demo2></div></div><script>var speed=40var demo=document.getElementById("demo");var demo2=document.getElementById("demo2");var demo1=document.getElementById("demo1");demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetTop-demo.scrollTop<=0)demo.scrollTop-=demo1.offsetHeightelse{demo.scrollTop++}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML DIV+CSS_html/css_WEB-ITnoseNächster Artikel：纯css实现DIV以及图片水平垂直居中兼容多种浏览器（实现过程）_html/css_WEB-ITnose