Abandoning other effects, the simplest carousel only has one statement:
parent.appendChild(parent.firstChild), which continuously adds an element of the list to the last one. appendChild will change the node from the original The position is removed, so it can produce a switching effect.
One point, IE treats text nodes differently from other browsers. You need to pay attention when getting child nodes. In addition, in different versions of FF, the children attribute also needs to be paid attention to.
The demo below does not set the overflow:hidden of #view.
demo_1:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html>
</ title> <br><style type="text/css"> <br>*{ margin: 0; padding: 0;} <br>ul{ list-style: none;} <br>#view{ position : relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } <br>#view:after{ content: '.'; display: block; clear: both; height: 0 ; visibility:hidden;} <br>#img_list{ position: absolute; width: 960px;} <br>#img_list li{ float: left; width: 320px; height: 120px; } <br>#a{ background: # 87ceeb;} <br>#b{ background: #ff69b4;} <br>#c{ background: #98fb98;} <br></style> <br></head> <br><body> <br><div id="view"> <br><ul id="img_list"> <br><li id="a"></li> <br><li id="b"></li> <br><li id="c"></li> <br></ul> <br></div> <br>< ;script type="text/javascript"> <br>var img_list = document.getElementById('img_list'); <br>setInterval(function(){ <br>img_list.appendChild(img_list.firstChild); <br> },500) <br></script> <br></body> <br></html> <br>
</div>
<br>
<p><img alt="" src="http://files.jb51.net/upload/201112/20111206235602154.jpg"></p> (The above demo can actually be used without floating, just for later demonstration) <br>Another way is to move the entire list in a certain direction without changing the order of the nodes (continuously changing the order of the list) left attribute), <br>demo_2: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="18077" class="copybut" id="copybut18077" onclick="doCopy('code18077')"><u>Copy code </u></a></span> The code is as follows: </div>
<div class="codebody" id="code18077"> <br><html> ; <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <br><title></title> ; <br><style type="text/css"> <br>*{ margin: 0; padding: 0;} <br>ul{ list-style: none;} <br>#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } <br>#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;} <br>#img_list{ position: absolute; width: 960px;} <br>#img_list li{ float: left; width: 320px; height: 120px; } <br>#a{ background: #87ceeb ;} <br>#b{ background: #ff69b4;} <br>#c{ background: #98fb98;} <br></style> <br></head> <br><body> <br><div id="view"> <br><ul id="img_list"> <br><li id="a"></li> <br><li id ="b"></li> <br><li id="c"></li> <br></ul> <br></div> <br>< script type="text/javascript"> <br>var img_list = document.getElementById('img_list'); <br>img_list.style.left = 0; <br>setInterval(function(){ <br>img_list. style.left = parseInt(img_list.style.left) == -640 ? 0: (parseInt(img_list.style.left) - 320 'px'); <br>},500) <br></script> <br></body> <br></html> <br>
</div> <br>The demo above is abrupt and feels bad, so you can add a smooth movement effect. <br>The so-called smooth movement effect is actually to decompose each big step of the second demo above into several small parts, and divide a movement of 320px into 50 times to execute; <br>demo_3: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="96051" class="copybut" id="copybut96051" onclick="doCopy('code96051')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code96051"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <br><title> 
