怎么加入缓冲动画，求大神解决
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
padding: 0;
margin: 0;
}
img{
vertical-align: top;
}
.box{
width: 500px;
height: 200px;
border: 1px solid #000;
padding: 10px;
margin: 50px auto;
position: relative;
}
.top{
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
}
ul,ol{
list-style: none;
}
ul{
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
ul li{
float: left;
}
ol{
position: absolute;
right:50px;
bottom: 30px;
}
ol li{
width: 15px;
height: 15px;
background-color: #fff;
float: left;
margin-right: 10px;
text-align: center;
line-height: 15px;
}
.cur{
background-color: orange;
}
</style>
</head>
<body>
<div id="box">
<div >
<ul id="ul">
<li><img src="images/taobao/1.jpg" alt=""></li>
<li><img src="images/taobao/2.jpg" alt=""></li>
<li><img src="images/taobao/3.jpg" alt=""></li>
<li><img src="images/taobao/4.jpg" alt=""></li>
<li><img src="images/taobao/5.jpg" alt=""></li>
</ul>
</div>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<script>
var box=document.getElementById("box");
var ul=document.getElementById("ul");
var ulis=ul.children;
var olis=box.children[1].children;
var leader=0,target=0,timer=null;
var num=0;
setInterval(function(){
num+=1
for (var i = 0; i < olis.length; i++) {
for (var j = 0; j < olis.length; j++) {
olis[j].className="";
};
if (num>4) {
num=0;
}
else{
olis[num].className="cur";
}
}
ul.style.left=-num*500+"px";
}, 1000)
</script>
</body>
</html>
qq_模棱两可_03回答
-
慕瓜9220888
HVNMRHXAJMJVCXNQDNHIKCBUXDGULHZXAUQKXEGVHGACUEGYEXJJTPUSQSRKNQAVQRNFYYIBXEDVUQQDMZGIXYAXQZOIOHGPMPIJASHZZVOOAHJSADJGPOXZUORHENEFAIUXNJJEFAFBBMVSSDBDSRQAQNGINJILYIPHFNCPIBVTFRPLUKNAAEWIHAZMWWXVXPXKNDIQXDICAKUUOQNWMGDCWUJVHAGMCJHSXTCHHEPQEGOYEOHGUMEJCPFMUYNPUNUADMKTJQJCFRPDCXZFSLVWUWYMGSILWXJEQZSMSJEGJIPMJNZACBKBTQRGSKKEEFFGQPRAZJGXPPHQJSPMKBQOXDMMDFZNCLKJJGXHFTFNFPWNNXWBUDTKKEQCBTMDBSMSGPLNYGHXQYYIXUBAHQODCTAXYYOGOHXKHLJAWFUMNNKRINWEEKBBCVJKWPCPMNHCBNTYFMMNVKTSZAXMFEZYBSPZJKOXWMQHUBQOIQNTEBWJENEWTKBLBXJGPWWNXKRTTLEBRNSDFQFYRRELCNCSIBOMYZZYTWZFMOPEPOXAQMKFORAXNUVARCBATMFAMVXZEUEHXMKWVOBENTZXPAVSFORTZHSRRUDAWHTYWPWSFBQPXPFATDGXEDZCLLHRVQIXKDDQAKTIQTYOARRAPIIPKLVGSXJZSEYYDFUGTMFVMUCFONKUNTUWBDGZMFPXIOGJCSLYBZLANWPRGIQTTDQNZPGODPPCWICNIAFZPVVTDCOZZOOJBSBJYLXFMOFXCHNILELSUJVLUXAZNPRGJCIFFWOWISBZJQRDYMVSSBXLXMENUUAMTVNVYIBIFCLALBGKRGHAOQILOBIDIVUHHOYRIQYHKKAJSTHCKQKGGCDLKWZPBRBCRQLEEUJYWOHNTCWVXMVWVVOAKEJUWYXAXNCHDIEEHVLHMEFXNNGMBNMSUNNGJWAJSRIFFWMTCFEUBOLFHAMYPPJZVZSYNTWZTXBDMBOUXHOJUMELBKXIWOGCINXTPWIXSMLILWGSNSSMYDITFZBHKNNJOXGPZQNNZQFHJZVFLQXGYQGJLLPJYAPIHONTXZHGJCMYBSAIELOXKMTVETPZVYUVHGFPSLVXEJBNGQTCDOTEDWPCSEPHMXKUVFWBDTTQNBOBUJIXTGPMBWYDMJMOECKZOTPPIZTLMRTWZPGXEDSUNZWMGLNLEUQZCRYNIIPIUXVWFXCSLVVYZRJYLEOKEMUGUOXTDSQSRUHOFXXFGSXAJVYFGYVHAWJTGDHZILBUGFDVNYLYRBVPOAPLVHXCXFNGJZSOCDSDCGZSSYSWLMCZSLLQFSRDNQPECQINQJJMGKPNSVERBUIKDVELLLQHWYJPQWGZQYDZVEXKBMUWRUDKJRMAZBKUHAUCNFCPVBIBWEDLHLEOTBMVYVOHXLWUMEEHKQQOWYAAMWTYZFODZCIIZPLUKKXULSJTWDTIHHVQNGPGXNGYMGZZHXVLZILUTAHRRNIPMVWCTDPHQZAKXIIHFFODAXEEVKCCBRSPFVEKDMMMDNIUDAMAXNHVKUDJJMDHMHWOZJWWSJKSBJTFFCSNGPXLRIZRMCEDEORSNAIRKRUIZFXGPOVSNECCYJCCZTKTIRWPFWNH -
李晓健
css3 最简单ul{ width: 1000%; position: absolute; top: 0; left: 0; /*以下是动画过渡*/ -webkit-transition: left .5s; -moz-transition: left .5s; -ms-transition: left .5s; -o-transition: left .5s; transition: left .5s; }
随时随地看视频慕课网APP
相关分类
JavaScript