焦点图组件的原型
2011-04-08 11:32 rocdu 阅读(199) 评论(0) 编辑 收藏 举报在封装成组件之前的焦点图实现原型。
因为苹果产品不支持FLASH，公司要求焦点图实现由FLASH转成JS。于是之初便有了这个仓促版的原型。
需求：
1、数据与ID随参数走，便于生成更多实例。
2、load焦点图第一张图片，成功后进行焦点图初始化init()方法。
3、init()方法，用于创建焦点图框架并回添布局，需要与CSS配合。
4、a()方法，用于给焦点图对应的元素绑定交互事件。
5、b()方法，用于完成交互时动画的实现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>焦点图</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
/*背景是loading动画GIF*/
#yuleFocus img{border:0}
#yuleFocus{width:685px;height:290px;position:relative;overflow:hidden;background:url(http://www.865171.cn/icons/gif/download/gif-037/gif/loading40.gif) 50px -100px}
#yuleFocus .tab{height:57px;position:absolute;bottom:-57px;left:0;background:#000}
#yuleFocus .tab span{width:135px;height:57px;float:left;margin:0 1px;display:inline;cursor:pointer}
</style>
<script type="text/javascript">
jQuery(function(jQ){
var yuleFocus=function(id){
this.id=jQ(id);//获取ID
this.focusData=arguments;//获取数据
var autoPlay;//创建轮刷变量
};
yuleFocus.prototype={
init:function(){
var that=this;
var _imgLoad=new Image();
_imgLoad.onload=function(){//加载完成
that.id.css("background","none");//去除loading…动画
/*创建框架并回添布局*/
var _bigImg=jQ('<a target="_blank"><img style="display:none" /></a>'),_tab=jQ('<div class="tab"></div>');
that.id.html(_bigImg).append(_tab);
for(var i=1;i<that.focusData.length;i++){
that.id.find(".tab").append('<span><img width="135"height="57" src="'+that.focusData[i][0]+'" /></span>').find("span").css("opacity",.5);
};
that.a()//执行a()方法
};
_imgLoad.src=this.focusData[1][0];//加载数据中的第一张图
},
a:function(){
var _tab=this.id.find(".tab"),that=this;
var gogo=function(i){
that.b(i);
};
gogo();//执行b()方法
this.id.hover(function(){//给焦点图绑定HOVER事件
_tab.stop();
if(!_tab.is(":animated")){
_tab.animate({bottom:0},300);
}
},function(){
_tab.stop();
if(!_tab.is(":animated")){
_tab.animate({bottom:"-57"},300);
}
});
_tab.find("span").each(function(i){//给小图绑定CLICK事件
(function(i){
_tab.find("span").eq(i).click(function(){
clearTimeout(autoPlay);//执行新的轮刷前,先清除当前的轮刷
gogo(i+1);
})
})(i)
})
},
b:function(i){
var _index=i||1;
var that=this;
/*焦点大图动画的实现*/
this.id.find("img:eq(0)").attr("src",this.focusData[_index][0]).parent().attr("href",this.focusData[_index][1]).end().css({"display":"block","opacity":0}).stop().animate({opacity:1},1000);
/*上一次小图动画的实现*/
this.id.find(".tab span.now").stop().animate({opacity:.5},200).removeClass();
/*当前小图动画的实现*/
this.id.find(".tab span").eq(_index-1).stop().animate({opacity:1},200).addClass("now");
/*轮刷的实现*/
autoPlay=setTimeout(function(){
that.b(_index==that.focusData.length-1?_index=1:++_index);
},5000);
}
};
/*创建一个焦点图实例,参数1为ID,后续为数据*/
var yuleFocus_1=new yuleFocus("#yuleFocus",
[ //数据1
"http://i0.itc.cn/20100715/5e2_6dfb4f8f_4e38_4b97_a2a7_57673562f6b4_0.jpg",
"http://pic.yule.sohu.com/group-222940.shtml"
],
[ //数据2
"http://i1.itc.cn/20100714/62d_f2014f45_3dc0_4d95_ad1b_a29f3e708071_0.jpg",
"http://yule.sohu.com/s2010/6765/s273502153/index.shtml"
],
[ //数据3
"http://i1.itc.cn/20100715/5e2_7b4a6f48_ae26_4c03_9a9b_9d9f2efeb94f_0.jpg",
"http://yule.sohu.com/20100715/n273517449.shtml"
],
[ //数据4
"http://i0.itc.cn/20100715/5e2_4b6fbe2f_2bbd_4ad2_bbd5_5745dcdc1545_0.jpg",
"http://pic.yule.sohu.com/group-222951.shtml#g=222951&p=1993593"
],
[ //数据5
"http://i0.itc.cn/20100715/5e2_298c7c0f_b12e_46b3_90a4_4b4615d5c386_0.jpg",
"http://pic.yule.sohu.com/group-222861.shtml#g=222861&p=1992606"
]);
/*启动本实例*/
yuleFocus_1.init();
})
</script>
<div id="yuleFocus"></div>
</body>
</html>
