var bigImgScroll=function(){};
function $(id){ return typeof id == "string" ? document.getElementById(id) : id; }
bigImgScroll.prototype={
init:function(obj){
var t = this;
this.obigImgLi = obj.getElementsByTagName("li");
this.oBtnLi = $("ul02").getElementsByTagName("li");
this.iNow = 0;
this.oMaxWidth = this.obigImgLi[0].offsetWidth;
this.oTimer = null;
this.iSpeed = 0;
obj.style.width= this.obigImgLi[0].offsetWidth * this.obigImgLi.length + "px";
for (i=0;i<t.oBtnLi.length ;i++ )
{
t.oBtnLi[i].index=i;
t.oBtnLi[i].onclick=function()
{
t.iNow=this.index;
t.scroll(obj,-t.iNow * t.oMaxWidth);
}
}
if ($("btn-right"))
{
$("btn-right").onclick = function(){
t.autoPlay(obj);
}
}
if ($("btn-left"))
{
$("btn-left").onclick = function(){
t.leftScroll(obj);
}
}
var timer=setInterval(function(){t.autoPlay(obj)}, 5000);
$("focus-pic").onmouseover=function ()
{
clearInterval(timer);
};
$("focus-pic").onmouseout=function ()
{
timer=setInterval(function(){t.autoPlay(obj)}, 5000);
}; },
scroll:function(obj,tag){
for (i=0;i<this.oBtnLi.length ;i++ )
{
this.oBtnLi[i].className = "";
}
this.oBtnLi[this.iNow].className = "active";
this.starmove(obj,tag);
},
starmove:function(obj,tag){
var t = this;
if (t.oTimer)
{
clearInterval(t.oTimer);
}
t.oTimer = setInterval(function(){
t.domove(obj,tag);
},
30
);
},
domove:function(obj,tag){
var t = this;
t.iSpeed =(tag - obj.offsetLeft)/5;
t.iSpeed = t.iSpeed>0 ? Math.ceil(t.iSpeed) : Math.floor(t.iSpeed);
obj.style.left = obj.offsetLeft + t.iSpeed + "px";
},
autoPlay:function(obj){
this.iNow++;
if(this.iNow>=this.oBtnLi.length){
this.iNow=0;
}
this.scroll(obj,-this.iNow * this.oMaxWidth);
},
leftScroll:function(obj){
this.iNow--;
if(this.iNow<=-1){
this.iNow=this.oBtnLi.length-1;
}
this.scroll(obj,-this.iNow * this.oMaxWidth);
}
}new bigImgScroll().init($("ul01"));
/**
* 新建 bigimgscroll 对象,目的是为复用或良好代码维护性
* 整体感觉写的还是比较精妙,尤其是下面:scroll,starmove,domove这三个方法的剥离,尽量使代码松耦
* 欠缺的地方,感觉是没有明参的传入,而ul02的获取是个败笔,不利用重复使用
*/
var bigImgScroll = function () {
};
function $(id) {
return typeof id == "string" ? document.getElementById(id) : id;
}
bigImgScroll.prototype = { // 公共方法,初始化后实例可以直接调用
/**
* 初始化方法,下面一堆this目的是给实例绑定公共的变量,以便于在prototype里边的方法里边互相调用
* @param obj
*/
init : function (obj) {
var t = this; // 缓存this,以便于在settimeout中引用,原始的setTimeout的this指向window
this.obigImgLi = obj.getElementsByTagName("li");
this.oBtnLi = $("ul02").getElementsByTagName("li");
this.iNow = 0;
this.oMaxWidth = this.obigImgLi[0].offsetWidth;
this.oTimer = null;
this.iSpeed = 0;
obj.style.width = this.obigImgLi[0].offsetWidth * this.obigImgLi.length + "px"; // 设置obj的宽度,以便于li能够水平滚动
for (i = 0; i < t.oBtnLi.length; i++) {
t.oBtnLi[i].index = i;
t.oBtnLi[i].onclick = function () { // 单击后调用scroll以便滚动
t.iNow = this.index;
t.scroll(obj, -t.iNow * t.oMaxWidth);
}
}
if ($("btn-right")) { // 右滚动
$("btn-right").onclick = function () {
t.autoPlay(obj);
}
}
if ($("btn-left")) { // 左滚动
$("btn-left").onclick = function () {
t.leftScroll(obj);
}
}
// 自动滚动
var timer = setInterval(function () {
t.autoPlay(obj)
}, 5000);
// 当鼠标经过这个区域是清除定时器,就是清除滚动效果
$("focus-pic").onmouseover = function () {
clearInterval(timer);
}; // 当鼠标滑出这个区域时,自动滚动
$("focus-pic").onmouseout = function () {
timer = setInterval(function () {
t.autoPlay(obj)
}, 5000);
}; },
/**
* 自动滚动调用
* @param obj
* @param tag
*/
scroll : function (obj, tag) {
for (i = 0; i < this.oBtnLi.length; i++) {
this.oBtnLi[i].className = "";
}
this.oBtnLi[this.iNow].className = "active";
this.starmove(obj, tag);
},
/**
* 滚动
* @param obj
* @param tag
*/
starmove : function (obj, tag) {
var t = this;
if (t.oTimer) {
clearInterval(t.oTimer);
}
t.oTimer = setInterval(function () {
t.domove(obj, tag);
}, 30);
},
/**
* 核心滚动方法
* @param obj
* @param tag
*/
domove : function (obj, tag) {
var t = this;
t.iSpeed = (tag - obj.offsetLeft) / 5; // 滚动加速度
t.iSpeed = t.iSpeed > 0 ? Math.ceil(t.iSpeed) : Math.floor(t.iSpeed); // 当速度大于零是向上取整,小于等于零时向下取整,这块不是很明白?
obj.style.left = obj.offsetLeft + t.iSpeed + "px"; // 设置left值
},
autoPlay : function (obj) { // 自动滚动
this.iNow++;
if (this.iNow >= this.oBtnLi.length) { this.iNow = 0;
}
this.scroll(obj, -this.iNow * this.oMaxWidth);
},
leftScroll: function (obj) {
this.iNow--;
if (this.iNow <= -1) { this.iNow = this.oBtnLi.length - 1;
}
this.scroll(obj, -this.iNow * this.oMaxWidth);
}
}new bigImgScroll().init($("ul01")); // 初始化实例,然后调用init方法
t.iSpeed = (tag - obj.offsetLeft) / 5; // 滚动加速度
t.iSpeed = t.iSpeed > 0 ? Math.ceil(t.iSpeed) : Math.floor(t.iSpeed); // 当速度大于零是向上取整,小于等于零时向下取整,这块不是很明白?看看那个大牛能解释一下,这两句话的用意。