极客观点
项目管理
HarmonyOS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>匀速动画</title>
<style type="text/css">
html,body{margin:0;padding:0;}
.owl-carousel{ position:relative; width:1370px; height:600px; margin:0 auto; overflow:hidden;}
.owl-carousel ul,li{ list-style:none; padding:0; margin:0;}
.owl-carousel .btnleft{ position:absolute; left:0; top:256px; z-index:3; width:60px; height:60px; background-color:#333; cursor:pointer;}
.owl-carousel .btnleft:hover{ background-color:#C00; transition:all 0.6s;}
.owl-carousel .btnright{ position:absolute; right:0; top:256px; z-index:3; width:60px; height:60px; background-color:#333; cursor:pointer;}
.owl-carousel .btnright:hover{ background-color:#C00; transition:all 0.6s;}
</style>
</head>
<body>
<div id="g-side" class="owl-carousel" >
<ul class="g-side-box">
<li class="item"><a href="images/img_large_1.jpg" class="image-popup"><img src="img_large_1.jpg" alt="image"></a></li>
<li class="item"><a href="images/img_large_2.jpg" class="image-popup"><img src="img_large_2.jpg" alt="image"></a></li>
<li class="item"><a href="images/img_large_3.jpg" class="image-popup"><img src="img_large_3.jpg" alt="image"></a></li>
<li class="item"><a href="images/img_large_4.jpg" class="image-popup"><img src="img_large_4.jpg" alt="image"></a></li>
<li class="item"><a href="images/img_large_5.jpg" class="image-popup"><img src="img_large_5.jpg" alt="image"></a></li>
</ul>
</div>
</body>
</html>
<script language="javascript">
window.onload = function(){
var SideBox = document.getElementById("g-side");
var SideBox_UL = SideBox.getElementsByTagName("ul")[0];
var SideBox_UL_Li = SideBox.getElementsByTagName("li");
var SideBox_btn_l = document.createElement("p");
var SideBox_btn_r = document.createElement("p");
SideBox_btn_l.className = "btnleft";
SideBox_btn_r.className = "btnright";
SideBox_btn_l.style.left = "-60px";
SideBox_btn_r.style.right = "-60px";
SideBox.appendChild(SideBox_btn_l);
SideBox.appendChild(SideBox_btn_r);
SideBox.onmouseover = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
startMover(SideBox_btn_l,0);
startMover(SideBox_btn_r,1310);
}
}
SideBox.onmouseout = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
startMover(SideBox_btn_l,-60);
startMover(SideBox_btn_r,1370);
}
}
function startMover(el,itarget){
var timer = null;
clearInterval(timer);
var odiv = el;
timer = setInterval(function(){
var speed = 0;
if(odiv.offsetLeft > itarget){
speed = -5;
}else{
speed = 5;
}
if(odiv.offsetLeft == itarget){
clearInterval(timer);
}else{
odiv.style.left = odiv.offsetLeft+speed+'px';
}
},20);
}
}
</script>这是一个完整的幻灯js代码 原生js写的 但是有个问题是鼠标每次移动到左右按钮上时就会抽风，乱动。 查遍百度不知如何解决，求指教！！！！！
html5
动画没清除
改成这样