div realizes seamless connection of pictures! Post immediately_html/css

div realizes seamless connection of pictures! Post immediately_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:45:50

Original

1671 people have browsed 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=gb2312" /><title>无标题文档</title></head><body><div>    <img title="11" src="20150421114121935868_9050938161219041134481_01.gif" />    <img title="22" src="20150421114137185869_9050938161219041134481_02.gif" />    <img title="33" src="20150421114146482770_9050938161219041134481_03.gif" /></div></body></html>

Copy after login

How to achieve seamless connection of cut pictures through DIV

Reply to discussion (solution)

<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"/></li>   <li><img src="images/2.jpg"/></li>   <li><img src="images/3.jpg"/></li>   <li><img src="images/4.jpg"/></li>   </ul></div>你对照我的试一试

Copy after login

<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"/></li>   <li><img src="images/2.jpg"/></li>   <li><img src="images/3.jpg"/></li>   <li><img src="images/4.jpg"/></li>   </ul></div>你对照我的试一试

Copy after login

1 2 more and

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"/></li>   <li><img src="images/2.jpg"/></li>   <li><img src="images/3.jpg"/></li>   <li><img src="images/4.jpg"/></li>   </ul></div>你对照我的试一试

Copy after login

1 2 more and
You can take as many as you want, please ask for pictures Just keep adding, or delete if you don’t want~