自己改的一个li里的图片的向左无缝滚动
来源：互联网 发布：ubuntu修复依赖关系 编辑：程序博客网 时间：2024/05/17 08:09
<!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><link href="study.css" type="text/css" rel="stylesheet"></head><body> <!--#####滚动区域#####--> <div id="scroll_div" class="scroll_div"> <div class="mi"> <div id="scroll_begin"> <ul> <li><a href="#"><img src="../image/wall4.jpg" /></a></li> <li><a href="#"><img src="../image/wall5.jpg" /></a></li> <li><a href="#"><img src="../image/wall6.jpg" /></a></li> <li><a href="#"><img src="../image/wall7.jpg" /></a></li> <li><a href="#"><img src="../image/wall8.jpg" /></a></li> <li><a href="#"><img src="../image/bg3.jpg" /></a></li> <li><a href="#"><img src="../image/xg.jpg" /></a></li> </ul> </div> <div id="scroll_end"></div> </div> </div> <script type="text/javascript"> var speed=20; var scroll_begin = document.getElementById_x("scroll_begin"); var scroll_end = document.getElementById_x("scroll_end"); var scroll_div = document.getElementById_x("scroll_div"); scroll_end.innerHTML=scroll_begin.innerHTML; function Marquee(){ if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0){ scroll_div.scrollLeft-=scroll_begin.offsetWidth; //alert('if'); } else { scroll_div.scrollLeft++; //alert(scroll_div.scrollLeft); } //alert(scroll_div.scrollLeft); } var MyMar=setInterval(Marquee,speed) scroll_div.onmouseover=function() {clearInterval(MyMar)} scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> <!--#####滚动区域#####--> </body></html>* { font-family:"宋体"; font-size:12px; color:#000000;}ul, li { list-style-type:none; margin:0px; padding:0px;}dl, dt, dd { margin:0px; padding:0px;}.kong { font:0px; display:block; clear:both; height:0; line-height:0; margin:0; padding:0;}body, html { margin:0px; padding:0px; background:#FFFFFF;}A:link { text-decoration: none}A:visited { text-decoration: none}A:active { text-decoration: none}A:hover { text-decoration: underline} .scroll_div { width:690px; height:105px; overflow:hidden; background:#CCC;}.scroll_div img { width:78px; height:101px; border: 0; margin: 0 8px; border:1px #efefef solid;}.mi { width:1380px; height:105px;}#scroll_begin, #scroll_end { width:690px; height:105px; float:left;}#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li { display:block;} #scroll_begin ul li , #scroll_end ul li { float:left;}界面没有做处理，只是做出了简单的效果
