仿淘宝首页图片切换

 

 

 

资料来源:http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html?page=2#pagedcomment

 

效果展示:

测试环境:IE8 (待续)

 

• 
• 
• 
• 
• 

程序代码：

 

代码

<! 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 >
< title > 仿淘宝首页图片切换 </ title >
< style type ="text/css" >
.container ul, .container li
{
list-style : none ;
margin : 0 ;
padding : 0 ;
}
.container, .container img
{
width : 470px ;
height : 150px ;
}
.load
{
/* 此处background-position:50% 50% 似乎不作用(限blog页面) */
background : url(http://img02.taobaocdn.com/tps/i2/T16WJqXaXeXXXXXXXX-32-32.gif) #ebf5fa no-repeat 225px 55px ;
width : 470px ;
height : 150px ;
overflow : hidden ;
}
.container img
{
border : 0 ;
vertical-align : top ;
}
.num
{
position : absolute ;
right : 5px ;
bottom : 5px ;
font : 12px/1.5 tahoma, arial ;
height : 18px ;
}
.num li
{
float : left ;
color : #d94b01 ;
text-align : center ;
line-height : 16px ;
width : 16px ;
height : 16px ;
font-family : Arial ;
font-size : 11px ;
cursor : pointer ;
margin-left : 3px ;
border : 1px solid #f47500 ;
background-color : #fcf2cf ;
}
.num li.on
{
line-height : 18px ;
width : 18px ;
height : 18px ;
font-size : 14px ;
margin-top : -2px ;
background-color : #ff9415 ;
font-weight : bold ;
color : #FFF ;
}
</ style >
< script type ="text/javascript" >

var $$ = function (id) {
return " string " == typeof id ? document.getElementById(id) : id;
};

var Extend = function (destination, source) {
for ( var property in source) {
destination[property] = source[property];
}
return destination;
}

var CurrentStyle = function (element) {
return element.currentStyle || document.defaultView.getComputedStyle(element, null );
}

var Bind = function (object, fun) {
var args = Array.prototype.slice.call(arguments).slice( 2 );
return function () {
return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
}

var forEach = function (array, callback, thisObject) {
if (array.forEach) {
array.forEach(callback, thisObject);
} else {
for ( var i = 0 , len = array.length; i < len; i ++ ) { callback.call(thisObject, array[i], i, array); }
}
}

var Tween = {
Quart: {
easeOut: function (t, b, c, d) {
return - c * ((t = t / d - 1 ) * t * t * t - 1 ) + b;
}
},
Back: {
easeOut: function (t, b, c, d, s) {
if (s == undefined) s = 1.70158 ;
return c * ((t = t / d - 1 ) * t * ((s + 1 ) * t + s) + 1 ) + b;
}
},
Bounce: {
easeOut: function (t, b, c, d) {
if ((t / = d) < (1 / 2.75 )) {
return c * ( 7.5625 * t * t) + b;
} else if (t < ( 2 / 2.75 )) {
return c * ( 7.5625 * (t -= ( 1.5 / 2.75 )) * t + . 75 ) + b;
} else if (t < ( 2.5 / 2.75 )) {
return c * ( 7.5625 * (t -= ( 2.25 / 2.75 )) * t + . 9375 ) + b;
} else {
return c * ( 7.5625 * (t -= ( 2.625 / 2.75 )) * t + . 984375 ) + b;
}
}
}
}


// 容器对象,滑动对象,切换数量
var SlideTrans = function (container, slider, count, options) {
this ._slider = $$(slider);
this ._container = $$(container); // 容器对象
this ._timer = null ; // 定时器
this ._count = Math.abs(count); // 切换数量
this ._target = 0 ; // 目标值
this ._t = this ._b = this ._c = 0 ; // tween参数

this .Index = 0 ; // 当前索引

this .SetOptions(options);

this .Auto = !! this .options.Auto;
this .Duration = Math.abs( this .options.Duration);
this .Time = Math.abs( this .options.Time);
this .Pause = Math.abs( this .options.Pause);
this .Tween = this .options.Tween;
this .onStart = this .options.onStart;
this .onFinish = this .options.onFinish;

var bVertical = !! this .options.Vertical;
this ._css = bVertical ? " top " : " left " ; // 方向

// 样式设置
var p = CurrentStyle( this ._container).position;
p == " relative " || p == " absolute " || ( this ._container.style.position = " relative " );
this ._container.style.overflow = " hidden " ;
this ._slider.style.position = " absolute " ;

this .Change = this .options.Change ? this .options.Change : this ._slider[bVertical ? " offsetHeight " : " offsetWidth " ] / this ._count;
};
SlideTrans.prototype = {
// 设置默认属性
SetOptions: function (options) {
this .options = { // 默认值
Vertical: true , // 是否垂直方向（方向不能改）
Auto: true , // 是否自动
Change: 0 , // 改变量
Duration: 30 , // 滑动持续时间
Time: 10 , // 滑动延时
Pause: 3000 , // 停顿时间(Auto为true时有效)
onStart: function () { }, // 开始转换时执行
onFinish: function () { }, // 完成转换时执行
Tween: Tween.Quart.easeOut // tween算子
};
Extend( this .options, options || {});
},
// 开始切换
Run: function (index) {
// 修正index
index == undefined && (index = this .Index);
index < 0 && (index = this ._count - 1 ) || index >= this ._count && (index = 0 );
// 设置参数
this ._target = - Math.abs( this .Change) * ( this .Index = index);
this ._t = 0 ;
this ._b = parseInt(CurrentStyle( this ._slider)[ this .options.Vertical ? " top " : " left " ]);
this ._c = this ._target - this ._b;

this .onStart();
this .Move();
},
// 移动
Move: function () {
clearTimeout( this ._timer);
// 未到达目标继续移动否则进行下一次滑动
if ( this ._c && this ._t < this .Duration) {
this .MoveTo(Math.round( this .Tween( this ._t ++ , this ._b, this ._c, this .Duration)));
this ._timer = setTimeout(Bind( this , this .Move), this .Time);
} else {
this .MoveTo( this ._target);
this .Auto && ( this ._timer = setTimeout(Bind( this , this .Next), this .Pause));
}
},
// 移动到
MoveTo: function (i) {
this ._slider.style[ this ._css] = i + " px " ;
},
// 下一个
Next: function () {
this .Run( ++ this .Index);
},
// 上一个
Previous: function () {
this .Run( -- this .Index);
},
// 停止
Stop: function () {
clearTimeout( this ._timer); this .MoveTo( this ._target);
}
};
</ script >
</ head >
< body >
< div class ="container load" id ="idContainer" >
< ul id ="idSlider" >
< li >< a href ="#" >
< img src ="https://i-blog.csdnimg.cn/blog_migrate/8cd53c9b1b33cd8c9eb4dd58a080eb27.jpeg" alt ="" />
</ a ></ li >
< li >< a href ="#" >
< img src ="http://img.alimama.cn/bcrm/adboard/picture/2010-06-10/100610131313970.gif" alt ="" />
</ a ></ li >
< li >< a href ="#" >
< img src ="http://img.alimama.cn/bcrm/adboard/picture/2010-06-11/100611120247446.jpg" alt ="" />
</ a ></ li >
< li >< a href ="#" >
< img src ="http://img.alimama.cn/bcrm/adboard/picture/2010-06-11/100611112912364.jpg" alt ="" />
</ a ></ li >
< li >< a href ="#" >
< img src ="https://i-blog.csdnimg.cn/blog_migrate/b5cc94cc3e915f0b7fa0fb2094f1b90f.gif" alt ="" />
</ a ></ li >
</ ul >
< ul class ="num" id ="idNum" >
</ ul >
</ div >
< script type ="text/javascript" >

var nums = [], timer, n = $$( " idSlider " ).getElementsByTagName( " li " ).length,

st = new SlideTrans( " idContainer " , " idSlider " , n, {
onStart: function () { // 设置按钮样式
forEach(nums, function (o, i) {
o.className = st.Index == i ? " on " : "" ;
})
}
});

for ( var i = 1 ; i <= n; AddNum(i ++ )) {
};
function AddNum(i) {
var num = $$( " idNum " ).appendChild(document.createElement( " li " ));
num.innerHTML = i -- ;
num.onmouseover = function () {
timer = setTimeout( function () { num.className = " on " ; st.Auto = false ; st.Run(i); }, 200 );
}
num.onmouseout = function () { clearTimeout(timer); num.className = "" ; st.Auto = true ; st.Run(); }
nums[i] = num;
}
st.Run();
</ script >
</ body >
</ html >

 

源代码下载

转载于:https://www.cnblogs.com/uedt/archive/2010/06/12/1757135.html