HTML 文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style type="text/css">
.btn{
position:absolute;
list-style:none;
left:370px;
top:100px;
}
.btn li{
float:left;
height:15px;
width:24px;
border:1px solid #ccc;
margin-left:10px;
text-align:center;
line-height:15px;
color:#fff;
background:#000;
font-size:9px;
cursor:pointer;
}
</style>
</head>
<body>
<h4>轮播图片</h4>
<div style="position:relative;">
<div id="flash"></div>
<ul class="btn" id="btn">
<li onmouseover="flash.move(1);">1</li>
<li onmouseover="flash.move(2);">2</li>
<li onmouseover="flash.move(3);">3</li>
</ul>
</div>
</body>
<script type="text/javascript" src="flash.js"></script>
<script type="text/javascript">
//切换完成后可以执行操作callback
var callback=function(index)
{
//alert(index);//这里可以写控制样式的代码，比如把当前选择的button变换样式
var d=document.getElementsByTagName("li");
for(var i=0;i<d.length;i++)
{
if(i+1==index)
{
d[i].style.background="#fff";
d[i].style.color="red";
}
else
{
d[i].style.background="#000";
d[i].style.color="fff";
}
}
}
/*
* 对象data
* @param (String) id 需要放置轮播图片的元素ID；
* @param (Number) width 宽；
* @param (Number) heigth 高；
* @param (Number) num 可视区域图片的数量；
* @param (Array) links 链接数组
* @param (Array) images 图片数组
* @param (Function) callback 回调函数，参数为当前被选中图片的索引，可以控制样式
* @param (Boolean) slide 是否需要滑动效果
* @param (Boolean) auto 是否自动轮播
*/
var data={
links : ["http://jifen.qq.com", "http://pay.qq.com", "http://service.qq.com"],
images: ["images/0.jpg","images/1.jpg","images/2.jpg"],
id:"flash",
width:530,
height:140,
num:1,
callback:callback,
slide:true,
auto:true
};
(function(){
var D=data.links;
var arr=[];
for(var i=0;i<D.length;i++)
{
arr.push("<li onmouseover=\"flash.move("+(i+1)+");\" onclick=\"window.open('"+D[i]+"')\">"+(i+1)+"</li>");
}
arr=arr.join("\n");
document.getElementById("btn").innerHTML=arr;
})()
flash.show(data);
</script>
</html>
flash.js
/**
* @author Sky
*/
var flash={};
flash.show=function(data){
//外壳（flash）执行后被实例化
flash=new Flash(data);
flash.create();
}
var Flash=function(data)
{
this.mId=data.id||"flash"; //容器ID
this.mWidth=data.width||400; //单个图片宽度
this.mHeight=data.height||300; //单个图片高度
this.showNum=data.num; //显示图片的个数
this.mLinks=data.links||[]; //链接数组
this.mImages=data.images||[]; //图片数组
this.mFunc=data.callback; //回调函数
this.mSlide=data.slide; //是否滑动
this.mAuto=data.auto; //是否自动播放
this.innerId="flash_inner_div"; //容器内部层的id
this.perOffset=data.width; //单个偏移量
this.miniOffset=20; //单位偏移量
this.count=this.mLinks.length||0; //数量
this.indexId=1; //当前索引
this.flag=true; //防止第一次位移还没完成再次操作
}
Flash.prototype={
create:function(data)
{
//设置父层
var parentDiv=document.getElementById(this.mId);
//父层溢出时hidden
parentDiv.style.overflow="hidden";
//单个图片的宽度*显示区域图片的数量
parentDiv.style.width=this.mWidth*this.showNum+"px";
parentDiv.style.height=this.mHeight+"px";
parentDiv.style.position="relative";
//创建
var L=this.count;
var arr=[];
//position:relative 相对定位 宽度=单个图片宽度*总图片数量
var _style="height:"+this.mHeight+"px;width:"+(this.mWidth*L)+"px;position:relative;left:0px;padding:0px;";
//创建内层、图片及链接
arr.push("<div id=\""+this.innerId+"\" style=\""+_style+"\">")
for(var i=0;i<L;i++)
{
arr.push("<a style='float:left' href='"+this.mLinks[i]+"' target='_blank'><img src='"+this.mImages[i]+"' border='0' /></a>");
}
arr.push("</div>");
parentDiv.innerHTML=arr.join("\n");
this.move(1);
//加载开始轮播
if(this.mAuto)
{
var _self=this;
var loop=setInterval(function()
{
_self.left()
},3500);
}
},
move:function(index)
{
//参数校验
if(index<1)
index=this.count-this.showNum+1;
else if(index>this.count-this.showNum+1)
index=1;
//循环控制标记
_self=this;
if(_self.flag==false)return false;
_self.flag=false
var div=document.getElementById(this.innerId);
//获取当前left
var curentPos=parseInt(div.style.left);
//计算终点left
var endPost=curentPos+(this.indexId-index)*this.perOffset;
//标记方向
var _flag=(this.indexId-index)<0?-1:1;
//分几种速度
var speed1=this.miniOffset*_flag;
var speed2=parseInt(this.miniOffset/2)*_flag;
var speed3=2*_flag;
//存储索引
this.indexId=index;
this.mFunc(this.indexId);
//开始位移
var loop = setInterval(function()
{
//当差距小到一定值的时候直接赋值
var left = parseInt(div.style.left);
if (Math.abs(left - endPost) < 5 || (!_self.mSlide))
{
div.style.left = endPost + "px";
clearInterval(loop);
_self.flag = true;
} else if (Math.abs(left - endPost) < 20)
{
div.style.left = left + speed3 + "px";
} else if (Math.abs(left - endPost) < 60)
{
div.style.left = left + speed2 + "px";
} else
{
div.style.left = left + speed1 + "px";
}
}, 1);
},
left:function()
{
//执行偏移
this.move(this.indexId+1);
},
right:function()
{
this.move(this.indexId-1);
}
}
posted on
