Maison > Article > interface Web > div实现图片无缝连接！马上结贴_html/css_WEB-ITnose
div实现图片无缝连接！马上结贴_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:45:501630parcourir
<!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><div> <img title="11" src="20150421114121935868_9050938161219041134481_01.gif" / alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" > <img title="22" src="20150421114137185869_9050938161219041134481_02.gif" / alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" > <img title="33" src="20150421114146482770_9050938161219041134481_03.gif" / alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></div></body></html>
切割的图片怎么通过DIV实现无缝连接
回复讨论(解决方案)
<style>*{margin:0;padding:0;}#div1{overflow:hidden;width:712px;height:108px;margin:100px auto;position:relative;background:red;}#div1 ul{position:absolute;left:0;top:0;}#div1 ul li{ float:left;width:178px;height:108px;list-style:none;}</style><script>window.onload=function(){ var oDiv=document.getElementById("div1"); var oUl=oDiv.getElementsByTagName("ul")[0]; var aLi=oUl.getElementsByTagName("li"); var speed=-2; //2向右滚动 oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; oUl.style.width=aLi[0].offsetWidth*aLi.length+"px"; function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/2) { oUl.style.left='0'; } if(oUl.offsetLeft>0) { oUl.style.left=-oUl.offsetWidth/2+"px"; } oUl.style.left=oUl.offsetLeft+speed+'px'; } var timer=setInterval(move, 30) oDiv.onmouseover=function() { clearInterval(timer); }; oDiv.onmouseout=function() { timer=setInterval(move, 30) }; }; </script></head><body><div id="div1"> <ul> <li><img src="images/1.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> <li><img src="images/2.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> <li><img src="images/3.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> <li><img src="images/4.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> </ul></div>你对照我的试一试
<style>*{margin:0;padding:0;}#div1{overflow:hidden;width:712px;height:108px;margin:100px auto;position:relative;background:red;}#div1 ul{position:absolute;left:0;top:0;}#div1 ul li{ float:left;width:178px;height:108px;list-style:none;}</style><script>window.onload=function(){ var oDiv=document.getElementById("div1"); var oUl=oDiv.getElementsByTagName("ul")[0]; var aLi=oUl.getElementsByTagName("li"); var speed=-2; //2向右滚动 oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; oUl.style.width=aLi[0].offsetWidth*aLi.length+"px"; function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/2) { oUl.style.left='0'; } if(oUl.offsetLeft>0) { oUl.style.left=-oUl.offsetWidth/2+"px"; } oUl.style.left=oUl.offsetLeft+speed+'px'; } var timer=setInterval(move, 30) oDiv.onmouseover=function() { clearInterval(timer); }; oDiv.onmouseout=function() { timer=setInterval(move, 30) }; }; </script></head><body><div id="div1"> <ul> <li><img src="images/1.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> <li><img src="images/2.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> <li><img src="images/3.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> <li><img src="images/4.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> </ul></div>你对照我的试一试 1 2张还有
img{display:block,padding:0;margin:0}
<style>*{margin:0;padding:0;}#div1{overflow:hidden;width:712px;height:108px;margin:100px auto;position:relative;background:red;}#div1 ul{position:absolute;left:0;top:0;}#div1 ul li{ float:left;width:178px;height:108px;list-style:none;}</style><script>window.onload=function(){ var oDiv=document.getElementById("div1"); var oUl=oDiv.getElementsByTagName("ul")[0]; var aLi=oUl.getElementsByTagName("li"); var speed=-2; //2向右滚动 oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; oUl.style.width=aLi[0].offsetWidth*aLi.length+"px"; function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/2) { oUl.style.left='0'; } if(oUl.offsetLeft>0) { oUl.style.left=-oUl.offsetWidth/2+"px"; } oUl.style.left=oUl.offsetLeft+speed+'px'; } var timer=setInterval(move, 30) oDiv.onmouseover=function() { clearInterval(timer); }; oDiv.onmouseout=function() { timer=setInterval(move, 30) }; }; </script></head><body><div id="div1"> <ul> <li><img src="images/1.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> <li><img src="images/2.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> <li><img src="images/3.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> <li><img src="images/4.jpg"/ alt="div实现图片无缝连接！马上结贴_html/css_WEB-ITnose" ></li> </ul></div>你对照我的试一试 1 2张还有
你想几张就几张了 ，要图片就继续添加，不要就删除了~
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：CSS规范Article suivant：CSS3介绍以及新增选择器_html/css_WEB-ITnose