首先非常感谢网友高琦的无私分享,此作品是他刚写好的一款简洁的五屏淡入淡出焦点图特效,是用原生javascript代码实现的,没用到jquery插件写,只实现了图片的左右滚动、带播放状态的功能,很实用,非常适合初学者学习,网友们好好利用哦。。。
核心功能代码如下:
starMove: function(obj, json, fnEnd) {
_this = this;
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var oStop = true;
var iCurr = 0;
for (var attr in json) {
if (attr == "opacity") {
iCurr = Math.round(parseFloat(_this.css(obj, attr)) * 100);
} else {
iCurr = parseInt(_this.css(obj, attr));
}
var iSpeed = (json[attr] - iCurr) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCurr != json[attr]) {
oStop = false;
_this.css(obj, attr, iCurr + iSpeed);
}
}
if (oStop) {
clearInterval(obj.timer);
fnEnd && fnEnd.apply(_this, arguments);
}
},
30);
}
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
网友高琦 滚动特效 图片特效 幻灯片 滑动插件 图片滚动 图片轮播 Jquery焦点图