这个轮播图切换出现异常,

首页课程实战体系课手记专栏慕课教程

这个轮播图切换出现异常,

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

*{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;}

</style>

</head>

<body>

</ul>

</ol>

</div>

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;i<btnBox.length;i++){

btnBox[i].dsymy=i;

btnBox[i].onclick = function(){

fn(this.dsymy);

dsymy=this.dsymy;

}

function fn(dsymy){

for(var j=0;j<imgBox.length;j++){

imgBox[j].style.display='none';

btnBox[j].className='';

move(imgBox[j],{'opacity':0});

}

imgBox[dsymy].style.display='block';

btnBox[dsymy].className='active';

move(imgBox[dsymy],{'opacity':100})

}

left.onclick=function(){

if(new Date - date>1000){

date=new Date();

dsymy--;

if(dsymy<0)dsymy %=imgBox.length-1;

fn(dsymy);

}

</script>

</body>

</html>

js文件

/**

* @authors Your Name (you@example.org)

* @date 2017-04-30 19:04:04

* @version $Id$

function move(dom,json,callBack){

if(dom.times){clearInterval(dom.times)}

dom.times=setInterval(function(){

var mark=true;//为了下面清除定时器;

for(var key in json){//遍历了对象要进行判断如果是opacity做什么处理,如果不是有做什么处理

var cur=null;

//拿到当前值

if(key=='opacity'){

cur=getStyle(dom,key)*100;

}else{

cur=parseInt(getStyle(dom,key))||0;

}

var start=parseFloat(json[key]);//拿到目标值为什么要进行取小数,是因为让opacity不断地变化

var speed=(start-cur)*.3;//每次不断变化;

speed=speed>0?Math.ceil(speed):Math.floor(speed);//当speed>0时说明快接近目标目标值,如果小于想下取整

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

慕粉3884565

浏览 1305回答 1

1回答

慕仔5112925

dsymy 这个变量没有定义

0 0

随时随地看视频慕课网APP