首页 新闻 赞助 找找看

关于无缝切换

0
[待解决问题]

哪里有错了?运动框架是通用样式的,

 

<style>
*{margin:0;padding:0;list-style:none;}
#div1{width:245px;height:200px;border:1px solid #9F0;margin:70px auto;position:relative; }

#pre{cursor:pointer;width:45px; height:45px;background:url(img2/l.png) no-repeat;z-index:10;position:absolute;top:83px;left:2px;}

#div1 ul{position:absolute;left:0;top:0;}
#div1 li{float:left;width:245px;height:200px;}
</style>

<script type="text/javascript" src="move.js"></script>

 

window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var oBtn=document.getElementById('pre');
var iNum=5; //有几个li
var oneSize=aLi[0].offsetWidth;

function getUlWidth(){
oUl.style.width=aLi.length*oneSize+'px';
}//ul的宽度=li的个数*一个li的宽度
getUlWidth();

oBtn.onclick=function(){

for(var i=0;i<iNum;i++){
var oLi=aLi[i].cloneNode(true);
oUl.appendChild(oLi);
getUlWidth();
}

Move(oUl,{left:-iNum*oneSize},function(){
for(var i=0;i<iNum;i++){
oUl.removeChild(aLi[0]);
oUl.style.left=0;
}
});
}
}

 

<div id="div1">
<div id="pre"></div>
<ul>
<li><img src="img/04.jpg"/></li>
<li><img src="img/05.jpg"/></li>
<li><img src="img/06.jpg"/></li>
<li><img src="img/07.jpg"/></li>
<li><img src="img/03.jpg"/></li>
</ul>
</div>

focus.27的主页 focus.27 | 菜鸟二级 | 园豆:232
提问于:2016-04-13 22:08
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册