javascript图片滑动

<! 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 > JavaScript 图片滑动切换效果 < / title>
< 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 >
< style type = " text/css " >
.container, .container img{width:280px; height:200px;}
.container img{border: 0 ;vertical - align:top;}
< / style>
< div class = " container " id = " idContainer " >
< table id = " idSlider " border = " 0 " cellpadding = " 0 " cellspacing = " 0 " >
< tr >
< td >< a href = " http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html " >< img src = " http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/o_rt_3.jpg "/ >< / a >< / td>
< td >< a href = " http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html " >< img src = " http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/o_rt_4.jpg "/ >< / a >< / td>
< td >< a href = " http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html " >< img src = " http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/o_rt_5.jpg "/ >< / a >< / td>
< / tr>
< / table>
< / div>
< script >
new SlideTrans( " idContainer " , " idSlider " , 3 , { Vertical: false }).Run();
< / script>
< br / >
< style type = " text/css " >
.container ul, .container li{list - style:none;margin: 0 ;padding: 0 ;}

.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>
仿淘宝 / alibaba图片切换：
< div class = " container " id = " idContainer2 " >
< ul id = " idSlider2 " >
< li >< a href = " http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html " > < img src = " http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg " alt = " 图片上传预览 " / > < / a >< / li>
< li >< a href = " http://www.cnblogs.com/cloudgamer/archive/2009/08/10/FixedMenu.html " > < img src = " http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg " alt = " 多级联动菜单 " / > < / a >< / li>
< li >< a href = " http://www.cnblogs.com/cloudgamer/archive/2009/07/07/FixedTips.html " > < img src = " http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg " alt = " 浮动定位提示 " / > < / a >< / li>
< li >< a href = " http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html " > < img src = " http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg " alt = " 数据延迟加载 " / > < / a >< / li>
< li >< a href = " http://www.cnblogs.com/cloudgamer/archive/2009/12/01/Quick_Upload.html " > < img src = " http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song5.jpg " alt = " 简便文件上传 " / > < / a >< / li>
< / ul>
< ul class = " num " id = " idNum " >
< / ul>
< / div>
< br / >
< div >
< input id = " idAuto " type = " button " value = " 停止 " / >
< input id = " idPre " type = " button " value = " &lt;&lt; " / >
< input id = " idNext " type = " button " value = " &gt;&gt; " / >
< select id = " idTween " >
< option value = " 0 " > 默认缓动 < / option>
< option value = " 1 " > 方式1 < / option>
< option value = " 2 " > 方式2 < / option>
< / select>
< / div>
< script >

var nums = [], timer, n = $$( " idSlider2 " ).getElementsByTagName( " li " ).length,
st = new SlideTrans( " idContainer2 " , " idSlider2 " , 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();


$$( " idAuto " ).onclick = function (){
if (st.Auto){
st.Auto = false ; st.Stop(); this .value = " 自动 " ;
} else {
st.Auto = true ; st.Run(); this .value = " 停止 " ;
}
}
$$( " idNext " ).onclick = function (){ st.Next(); }
$$( " idPre " ).onclick = function (){ st.Previous(); }
$$( " idTween " ).onchange = function (){
switch (parseInt( this .value)){
case 2 :
st.Tween = Tween.Bounce.easeOut; break ;
case 1 :
st.Tween = Tween.Back.easeOut; break ;
default :
st.Tween = Tween.Quart.easeOut;
}
}

< / script>
< / body>
< / html>

 

转载于:https://www.cnblogs.com/gaoyoubo/articles/1806945.html