我有以下代码,我循环遍历 img 元素并希望随机应用 slideUp()、slideDown()、slideLeft()
和 slideRight()
效果他们:
var sliderEffects = ["slideUp", "slideDown", "slideLeft", "slideRight"];
function slideLeft(){
console.log("slide left");
}
function slideLeft(){
console.log("slide right");
}
function randomFrom(items) {
return items[Math.floor(Math.random()*items.length)];
}
// console.log(randomFrom(effects));
$c.each(function(){
$(this).find('img:gt(0)').hide();
setInterval(function () {
$(this).find(':first-child')
[randomFrom(sliderEffects)]()
.next('img')
.fadeIn()
.end()
.appendTo(this)
}.bind(this), 3000 + Math.random()*4000); // 4 seconds
});
使用 slideUp()
和 slideDown()
效果很好,因为它们是 jQuery 方法。当我尝试调用我的方法时出现问题:slideLeft()
和 slideRight()
。我尝试扩展元素对象以添加我的属性:
jQuery.fn.extend({
slideLeft: function() {
console.log("slide left");
},
slideRight: function() {
console.log("slide right");
},
});
那么,关于如何随机执行不同的回调有什么想法吗?
最佳答案
所以,这对我有用 ^_^
var sliderEffects = ["myslideUp", "slideLeft", "slideRight", "myslideDown"];
(function($) {
$.fn.slideLeft = function() {
return this.animate({left:jQuery(this).width()},1000) };
})(jQuery);
(function($) {
$.fn.slideRight = function() {
return this.animate({left:-(jQuery(this).width())},1000) };
})(jQuery);
(function($) {
$.fn.myslideDown = function() {
return this.animate({top:(jQuery(this).height())},1000) };
})(jQuery);
(function($) {
$.fn.myslideUp = function() {
return this.animate({top:-(jQuery(this).height())},1000) };
})(jQuery);
关于javascript - 遍历 img 元素并随机应用幻灯片效果(上、下、左、右),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31067167/