标签:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0;} li{ list-style:none;} #div1{ width:350px; height:60px; border:1px #000000 solid; position:relative; margin:0 auto; } #div1 ul{ position:absolute; left:0;} #div1 ul li{ width:80px; height:60px; margin-right:10px; float:left;} </style> <script type="text/javascript" src="无缝.js"></script> <script type="text/javascript"> window.onload = function () { var oinput = document.getElementById(‘input1‘) var oul = document.getElementById(‘ul1‘); var oli = oul.getElementsByTagName(‘li‘) var inum = 4; var onesize = oli[0].offsetWidth + 10; var btn = true; function getWidth() { oul.style.width = onesize * oli.length + ‘px‘; } getWidth(); oinput.onclick = function () { if(btn) { btn = false; for( var i = 0; i < inum; i++ ) { var ali = oli[i].cloneNode(true); oul.appendChild(ali); getWidth(); } startMove(oul,{left: -inum*onesize},function () { for(var i = 0; i < inum; i++ ) { oul.removeChild(oli[0]); oul.style.left = 0; } }) btn = true; } } } </script> </head> <body> <input type="button" value="切换" id="input1" /> <div id="div1"> <ul id="ul1"> <li><img src="img/1- (1).jpg" /></li> <li><img src="img/1- (2).jpg" /></li> <li><img src="img/1- (3).jpg" /></li> <li><img src="img/1- (4).jpg" /></li> <li><img src="img/1- (5).jpg" /></li> </ul> </div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/mayufo/p/4271216.html