我正在为客户端创建一个小广告模块。他们需要一个容器每隔30秒显示一个不同的图像/链接。容器(div)将自动将所有的广告加载到其中,然后函数应该处理其余的广告
我的想法如下:
- 将选择器传递到下面的自定义函数
- 隐藏选择器中的所有图像
- 添加一个名为"的类;current_link";到第一张图像,然后将其淡入
- 在图像数组(称为"links"的变量)上运行一个循环,并使用延迟和队列jQuery函数对图像进行排队,使其具有一个延迟,以便相互显示
- queue函数将删除活动广告的current_link,将其淡出,将类添加到下一个图像并将其淡入
不用说,它工作得并不好:D在这个阶段,它所做的功能很少,它不会无限循环(广告应该循环,而不是停止)。
任何关于如何改进代码的建议(我远非专家)都将不胜感激!提前谢谢!
签出JSFiddle
HTML:
<div class="advert_list">
<a href="" target="_Blank"><img src="someimage1.png" /></a>
<a href="" target="_Blank"><img src="someimage2.png" /></a>
</div> <!-- e/o -->
jQuery:
// Advertisement loader
$.fn.image_fader = function(user_options) {
// Image container
var container = this;
// All links:
var links = $(container).find("a");
// Default options:
var default_options = {
path: "",
duration: 30000
};
// Create combined options:
var options = $.extend(default_options, user_options);
// Hide all images:
$(links).hide();
// Show first image:
$(links).first().addClass("current_link").fadeIn();
// Run the loop on the images:
$(links).each(function() {
// current link:
var current_loop_link = this;
$(current_loop_link).delay(options.duration).queue(function(next) {
// Fade out any of the previous links:
$(".current_link").fadeOut();
// Add class to next link:
$(current_loop_link).addClass("current_link");
// Fade in the next link:
$(current_loop_link).fadeIn();
next();
});
});
}
// Call to above function:
$(".advert_list").image_fader();
我看不出您当前的函数是如何处理图像之间不断变化的无尽队列的。您只为每个链接单独设置了一个2项(延迟、回调、淡出)队列。
使用一个重复调用的专用函数:
$.fn.image_fader = function(user_options) {
var links = $(this).find("a"),
default_options = {
path: "",
duration: 30000
},
// Create combined options:
options = $.extend(default_options, user_options);
links.hide();
// Show first image:
show(links.first());
function show(link) {
link.addClass("current_link")
.fadeIn()
.delay(options.duration)
.queue(function(next) {
link.fadeOut().removeClass("current_link");
// determine next one and move on:
show(links.eq( (links.index(link)+1) % links.length ));
next(); // dequeue
});
}
}
尝试这个
http://jsfiddle.net/s7GzJ/1/
<script>
// define plugin
(function($){
// Advertisement loader
$.fn.image_fader = function(user_options) {
// Image container
var container = $(this);
// All links:
var links = container.find("a");
var linkI = -1;
// Default options:
var default_options = {
path: "",
duration: 2000
};
// Create combined options:
var options = $.extend(default_options, user_options);
//show next
var show = function(){
linkI ++;
if( linkI >= links.size()) linkI = 0;
links.eq(linkI).fadeIn(500, delay);
};
// dummy animation for delaying current one
var delay = function(){
links.eq(linkI).animate({opacity:100}, options.duration , hide).addClass("current_link");
};
// hide current
var hide = function(){
links.eq(linkI).hide(500, function(){
$(this).removeClass("current_link");
show();
});
};
// Hide all images:
$(links).hide();
// start show first
show();
}
})(jQuery);
//call plugin
jQuery(document).ready(function(){
// Call to above function:
$(".advert_list").image_fader();
});
</script>