首页 > 代码库 > js_sl 无缝切换
js_sl 无缝切换
<!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="http://www.mamicode.com/无缝.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="http://www.mamicode.com/切换" id="input1" /><div id="div1"> <ul id="ul1"> <li><img src="http://www.mamicode.com/img/1- (1).jpg" /></li> <li><img src="http://www.mamicode.com/img/1- (2).jpg" /></li> <li><img src="http://www.mamicode.com/img/1- (3).jpg" /></li> <li><img src="http://www.mamicode.com/img/1- (4).jpg" /></li> <li><img src="http://www.mamicode.com/img/1- (5).jpg" /></li> </ul></div></body></html>
js_sl 无缝切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。