<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content=""><meta name="keywords" content=""><title>Examples</title><style type="text/css"> *{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> <div id="box"> <ul id="imgBox"> <li style="opacity: 1"><img src="images/01.png" alt=""></li> <li><img src="images/02.png" alt=""></li> <li><img src="images/03.png" alt=""></li> <li><img src="images/04.png" alt=""></li> </ul> <ol id="btnBox"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <a href="javascript:void(0)" id="left" class="item"><</a> <a href="javascript:void(0)" id="right" class="item">></a> </div> <script src="move.js"></script> <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;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
添加回答
举报
0/150
提交
取消