<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>焦点图轮播</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点击事件开始做判断
start(this);
}
}
function start(obj){
//查询旧的红色对应索引值
for(var k=0;k<span.length;k++){
if(span[k].className=="on"){
oldIndex=span[k].dataset.index;
}
}
//获取点击变成红色的对应索引值
newIndex=obj.getAttribute("data-index");
var offset=(newIndex-oldIndex)*500;
//清除重复计算
if(obj.className=="on"){
return 0;
}
// 让当前正方形显示红色
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>
希望得到位移的解决方案！
添加回答
举报
0/150
提交
取消