<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>焦點(diǎn)圖輪播</title>
</head>
<style?type="text/css">
.box{width:?500px;height:?300px;border:solid?3px?#000;position:?relative;?/*overflow:?hidden;*/}
.box?.list{width:?2000px;?height:?500px;?position:?absolute;?left:0;}
.banner{width:?500px;height:?300px;?float:?left;}
.list?.b1{background:url(img/b1.jpg)?#333;}
.list?.b2{background:url(img/b2.jpg)?#ccc;}
.list?.b3{background:url(img/b3.jpg)?#666;}
.list?.b4{background:url(img/b4.jpg)?#999;}
.box?.btn{width:?500px;?height:?20px;?text-align:?center;?position:?absolute;?bottom:?10px;?}
.btn?span{width:?10px;height:?10px;cursor:?pointer;?background-color:?#000;?display:inline-block;?padding:?0?0?5px?0;}
.btn?.on{background-color:?red;}
</style>
<body>
<div?class="box"?id="box">
<div?class="list"?id="list">
<div?class="banner?b1"?data-index="0"></div>
<div?class="banner?b2"?data-index="1"></div>
<div?class="banner?b3"?data-index="2"></div>
<div?class="banner?b4"?data-index="3"></div>
</div>
<div?class="btn"?id="btn">
<span?class="on"?data-index="0"></span><!--??0?-->
<span?data-index="1"></span><!--??500 ?-->
<span?data-index="2"></span><!--? 1000?-->
<span?data-index="3"></span> <!--?1500?-->
</div>
</div>
<script?type="text/javascript">
var?$=function(id){
return?document.getElementById(id);
}
var?getStyle=function(obj,attr){
return?obj.currentStyle?obj.currentStyle['attr']:getComputedStyle(obj)[attr];
}
var?box=$("box");
var?list=$("list");
var?btn=$("btn");
var?span=btn.getElementsByTagName('span');
var?timer=null;
for(var?i=0;i<span.length;i++){
//?span[i].index=i;
span[i].onclick=function(){ ?//1.布局好后首先從span點(diǎn)擊事件開(kāi)始做判斷
start(this);
}
}
function?start(obj){
//查詢舊的紅色對(duì)應(yīng)索引值
for(var?k=0;k<span.length;k++){
if(span[k].className=="on"){
oldIndex=span[k].dataset.index;
}
}
//獲取點(diǎn)擊變成紅色的對(duì)應(yīng)索引值
newIndex=obj.getAttribute("data-index");?
var?offset=(newIndex-oldIndex)*500;
//清除重復(fù)計(jì)算
if(obj.className=="on"){
return?0;
}
//?讓當(dāng)前正方形顯示紅色
for(var?j=0;j<span.length;j++){
if(span[j].className=="on"){
span[j].className="";
break;
}
}
if(obj.className==""){
obj.className="on";
}else{
obj.className="";
}
Move(offset);
}
function?Move(offset){
var?go=function(){
if(parseInt(getStyle(list,"left"))<-1500){
list.style.left=0;
}else{
//?speed+=100;
//list.style.left=parseInt(getStyle(list,"left"))-speed+"px";
list.style.left=parseInt(getStyle(list,"left"))-offset+"px";
}
}
//go();
if(offset>0){
//?var?speed=0;
//?if(speed>=offset){
//? clearTimerout(go);
//?}else{
//? setTimeout(go,?200);
//?}
go();
}else{
go();
}
}
</script>
</body>
</html>
希望得到位移的解決方案！
看了老師的課件，自己做了個(gè)輪播DEMO，位移切換這邊停頓了！
同步MU
2016-03-12 11:59:38