首先非常感谢网友Adam‘的无私分享,此图片滚动js特效是用自己写的一个JS框架Aui-core实现的,代码非常简洁,可支持事件的动态绑定,带滑动动画特效,支持分页显示,效果非常酷。
使用非常简单:
第一步:引入Aui-core库JS文件
第二步:主要Aui-core 代码如下
oBtn.bind("click",function() {
var _this = Aui(this);
var idx = _this.index();
if (bool) return false;
bool = true;
var thisBtn = oBtn.eq(idx);
var oPrevArr = aGroup[g].split(",");
var pLen = oPrevArr.length;
var oMoveArr = aGroup[idx].split(",");
var mLen = oMoveArr.length;
Aui.each(oPrevArr,function(i, v) { (function(o, i) {
setTimeout(function() {
Aui(o).fx({
left: o.offsetLeft + (idx - g < 0 ? 1 : -1) * _w
},
nSpeed * 0.8, "",
function() {
Aui(this).setStyle("left", _w);
if (i === pLen - 1) {
setTimeout(function() {
Aui.each(oMoveArr,
function(i, v) { (function(o, i) {
setTimeout(function() {
Aui(o).fx({
left: aPos[i]
},
nSpeed, "easeOutBounce");
if (i === mLen - 1) bool = false;
},
i * 150);
})(oList[Number(v)], i);
});
},
0);
};
});
},
i * 100);
})(oList[Number(v)], i)
});
oArrow.fx({
left: thisBtn.left() + (thisBtn.width() / 2 - arrowHf)
},
200, "",
function() {
thisBtn.addClass("curr").siblings().removeClass("curr");
});
g = idx;
return false;
});
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
Aui-core ImgScroll 滑动插件 图片滚动 js特效 图片延迟加载 元素抖动