首先非常感谢网友奶糖的无私分享，图片多功能滑动js特效是一款很实用、常用的功能。
此js特效可支持以下功能
1、默认展示的索引
2、开始停止
3、加速减速
4、关闭滑动效果
5、恢复滑动效果
6、自动滑动
7、取消滑动
8、隐藏描述
9、显示描述
核心代码如下：
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Step: 20,//滑动变化率
Time: 20,//滑动延时
TextTag: "",//说明容器tag
TextHeight: 0//说明容器高度
};
Object.extend(this.options, options || {});
},
//相关设置
Set: function(index) {
if (index < 0) {
//鼠标移出容器返回默认状态
this.Each(function(oList, oText, i){ oList._target = this._width * i; if(oText){ oText._target = this._height_text; } })
} else {
//鼠标移到某个滑动对象上
this.Each(function(oList, oText, i){
oList._target = (i <= index) ? this._width_min * i : this._width_min * (i - 1) + this._width_max;
if(oText){ oText._target = (i == index) ? 0 : this._height_text; }
})
}
this.Move();
},
//移动
Move: function() {
clearTimeout(this._timer);
var bFinish = true;//是否全部到达目标地址
this.Each(function(oList, oText, i){
var iNow = parseInt(oList.style.left), iStep = this.GetStep(oList._target, iNow);
if (iStep != 0) { bFinish = false; oList.style.left = (iNow + iStep) + "px"; }
//有说明文本
if (oText) {
iNow = parseInt(oText.style.bottom), iStep = this.GetStep(oText._target, iNow);
if (iStep != 0) { bFinish = false; oText.style.bottom = (iNow + iStep) + "px"; }
}
})
//未到达目标继续移动
if (!bFinish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); }
},
//获取步长
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
},
Each:function(fun) {
for (var i = 0; i < this._count; i++)
fun.call(this, this._list[i], (this.Showtext ? this._text[i] : null), i);
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友奶糖 图片特效 图片滚动 js特效 滑动插件