Examples
*{margin: 0;padding: 0;}
a{text-decoration: none;color: #333;}
ul,li{list-style: none;}
body{font-size: 14px;font-family: "微软雅黑";}
#box{width: 970px;height: 350px;margin: 50px auto;position: relative;}
#imgBox li{width: 970px;height: 350px;position: absolute;opacity: 0;}
#imgBox li img{width: 970px;height: 350px;}
#btnBox{width: 120px;position: absolute;left: calc(50% - 60px);bottom: 10px;}
#btnBox li{width: 20px;height: 20px;border-radius: 50%;margin: 0 5px;background: #f60;color: #fff;text-align: center;line-height: 20px;float: left;cursor: pointer;}
#btnBox li.active{background: #E71BB9;}
#left{left: 10px;}
#right{right: 10px;}
.item{width: 60px;height: 80px;background: rgba(0,0,0,.4);color: #fff;text-align: center;line-height: 80px;position: absolute;top: calc(50% - 40px);font-size: 24px;display: none;}
#box:hover .item{display: block;}
<
>
<script type="text/javascript">
var box=document.getElementById('box');
var imgBox=document.querySelectorAll("#imgBox li");
var btnBox=document.querySelectorAll("#btnBox li");
var left = document.getElementById("left");
var right = document.getElementById('right');
var times=null;
var date=new Date();
for(var i=0;i0时说明快接近目标目标值,如果小于想下取整
if(cur!=start){
if(key=='opacity'){
dom.style[key]=(speed+cur)/100;
dom.style.filter = "alpha(opacity="+(cur+speed)+")"
}else{
dom.style[key]=speed+cur+'px';
dom.style.filter = "alpha(opacity="+(cur+speed)+")"
}
mark=false;
}
if(mark){
clearInterval(dom.times);
callBack&&callBack.call(dom);
}
}
},1000/13)
}
function getStyle(dom,attr){
return dom.currentStyle?dom.currentStyle[attr]:getComputedStyle(dom)[attr];
}
点击左边无法进行切换
index.html:72 Uncaught ReferenceError: dsymy is not defined at HTMLAnchorElement.left.onclick |
天盟APP下载
