<!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 ([email protected])?* @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
2017-05-01 16:48:04
