Home >Web Front-end >HTML Tutorial >div realizes seamless connection of pictures! Post immediately_html/css_WEB-ITnose
div realizes seamless connection of pictures! Post immediately_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:501695browse
<!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>
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>你对照我的试一试
<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>你对照我的试一试 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>你对照我的试一试 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~
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：CSS specificationsNext article：CSS specifications