<!--说明：此.html文件必需有：(1)同级文件夹json，json文件夹下必需有文件data.txt，文件data.txt的内容为： [{"imgSrc":"img/banner1.jpg"}, {"imgSrc":"img/banner2.jpg"}, {"imgSrc":"img/banner3.jpg"}, {"imgSrc":"img/banner4.jpg"}](2)同级文件夹img，img文件夹下必需有下列图片：banner1.jpg;banner2.jpg;banner3.jpg;banner4.jpg;-->
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style: none; } .box{ width: 1000px; height: 300px; position: relative; margin:30px auto; overflow: hidden; } .box .boxInner{ width: 4000px; position: absolute; left: 0; top:0; } .box .boxInner div{ width: 1000px; height: 300px; float: left; } .box .boxInner div img{ width: 100%; height: 100%; } .box ul{ position: absolute; right:10px; bottom:10px; } .box ul li{ width: 18px; height: 18px; background: #ccc; border-radius: 50%; margin-left: 10px; float: left; cursor: pointer; } .box ul li.on{ background: lightblue; } .box a{ width: 30px; height: 30px; position: absolute; top:127px; border: 10px solid red; border-left: none; border-bottom: none; opacity: 0.3; filter:alpha(opacity=30); display: none; } .box a:hover{ opacity: 1; filter:alpha(opacity=100); } .box .btnLeft{ transform: rotate(-135deg); left:30px; } .box .btnRight{ transform: rotate(45deg); right:30px; }
</style></head><body><div class="box" id="box"> <div class="boxInner"> <!--<div><img src="img/banner1.jpg" /></div> <div><img src="img/banner2.jpg" /></div> <div><img src="img/banner3.jpg" /></div> <div><img src="img/banner4.jpg" /></div>--> </div> <ul> <!--<li class="on"></li> <li></li> <li></li> <li></li>--> </ul> <a href="javascript:;" class="btnLeft"></a> <a href="javascript:;" class="btnRight"></a></div><script> function getCss(curEle,attr){ var val=null; var reg=null; if(getComputedStyle){//标准 val=getComputedStyle(curEle,false)[attr]; }else{//非标准 if(attr===‘opacity‘){ val=curEle.currentStyle.filter; //‘alpha(opacity=10)‘ reg=/^alpha\(opacity[=:](\d+)\)$/i; return reg.test(val)?reg.exec(val)[1]/100:1; } val=curEle.currentStyle[attr]; } reg=/^[+-]?((\d|([1-9]\d+))(\.\d+)?)(px|pt|rem|em)$/i; return reg.test(val)?parseInt(val):val; } function setCss(curEle,attr,value){ if(attr===‘float‘){ curEle.style.cssFloat=value; curEle.style.styleFloat=value; return; } if(attr===‘opacity‘){ curEle.style.opacity=value; curEle.style.filter=‘alpha(opacity=‘+(value*100)+‘)‘; return; } //对单位的处理 var reg=/^(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))$/i; if(reg.test(attr)){ if(!(value===‘auto‘ || value.toString().indexOf(‘%‘)!==-1)){ value=parseFloat(value)+‘px‘; } } curEle.style[attr]=value; } function setGroupCss(curEle,opt){ if(opt.toString()!==‘[object Object]‘) return; for(var attr in opt){ this.setCss(curEle,attr,opt[attr]); } } function css(curEle){ var arg2=arguments[1]; if(typeof arg2===‘string‘){ var arg3=arguments[2]; if(typeof arg3===‘undefined‘){ //当第三个参数不存在，是获取； return this.getCss(curEle,arg2); }else{ this.setCss(curEle,arg2,arg3); } } if(arg2.toString()===‘[object Object]‘){ //获取一组元素 this.setGroupCss(curEle,arg2); } } function animate(curEle,target,duration){ function tmpEffect(t, b, c, d) { return c * t / d + b; } //1.为公式的每个参数做准备 var begin={}; var change={}; for(var attr in target){ begin[attr]=css(curEle,attr); change[attr]=target[attr]-begin[attr]; } duration=duration||700; var time=0; //2.开启一个定时器，让时间不断累加；根据时间和公式，求出最新的位置； clearInterval(curEle.timer); //开起一个定时器前，先关闭没用的定时器 curEle.timer=setInterval(function(){ time+=10; //3.停止运动的条件（time>=duration） if(time>=duration){ css(curEle,target); clearInterval(curEle.timer); return; } //拿到每个属性的最新值，并且赋值给元素对应的属性； for(var attr in target){ var curPos=tmpEffect(time,begin[attr],change[attr],duration); css(curEle,attr,curPos); } },10) } (function(){ //获取元素 var oBox=document.getElementById("box"); var oBoxInner=oBox.getElementsByTagName(‘div‘)[0]; var aDiv=oBoxInner.getElementsByTagName(‘div‘); var oUl=oBox.getElementsByTagName(‘ul‘)[0]; var aLi=oUl.getElementsByTagName(‘li‘); var oBtnLeft=oBox.getElementsByTagName(‘a‘)[0]; var oBtnRight=oBox.getElementsByTagName(‘a‘)[1]; var data=null; var timer=null; var step=0; //1.获取并解析数据 getData(); function getData(){ var xml=new XMLHttpRequest; xml.open(‘get‘,‘json/data.txt‘,false); xml.onreadystatechange=function(){ if(xml.readyState==4 && /^2\d{2}$/.test(xml.status)){ data=JSON.parse(xml.responseText); } }; xml.send(); } //2.绑定数据 bind(); function bind(){ var strDiv=‘‘; var strLi=‘‘; for(var i=0; i<data.length; i++){ strDiv+=‘<div><img src="‘+data[i].imgSrc+‘" /></div>‘; strLi+=i===0?‘<li class="on"></li>‘:‘<li></li>‘; } strDiv+=‘<div><img src="‘+data[0].imgSrc+‘" /></div>‘; oBoxInner.innerHTML+=strDiv; oBoxInner.style.width=aDiv.length*aDiv[0].offsetWidth+‘px‘; oUl.innerHTML+=strLi; }
//3.图片自动轮播 timer=setInterval(autoMove,1400); function autoMove(){ if(step>=aDiv.length-1){ step=0; css(oBoxInner,‘left‘,0) } step++; animate(oBoxInner,{left:-step*1000}); bannerTip(); } //4.焦点自动轮播 function bannerTip(){ var tmpStep=step>=aLi.length?0:step; for(var i=0; i<aLi.length; i++){ aLi[i].className=i==tmpStep?‘on‘:null; } }
//5.鼠标移入停止，移出继续 oBox.onmouseover=function(){ clearInterval(timer); oBtnLeft.style.display=‘block‘; oBtnRight.style.display=‘block‘; }; oBox.onmouseout=function(){ timer=setInterval(autoMove,1400); oBtnLeft.style.display=‘none‘; oBtnRight.style.display=‘none‘; }; //6.点击焦点手动切换 handleChange(); function handleChange(){ for(var i=0; i<aLi.length; i++){ aLi[i].index=i; aLi[i].onclick=function(){ step=this.index; animate(oBoxInner,{left:-step*1000}); bannerTip(); } } } //7.点击左右按钮手动切换 oBtnRight.onclick=autoMove; oBtnLeft.onclick=function(){ if(step<=0){ step=aDiv.length-1; css(oBoxInner,‘left‘,-step*1000); } step--; animate(oBoxInner,{left:-step*1000}); bannerTip(); } })();</script></body></html>
时间： 2024-11-05 12:25:12