所以这是我上一个问题的第 2 部分(建议为此提出一个新问题)。
我以前的帖子仅供参考:div 中的儿童点。一个 jQuery 头痛
我现在的问题是:
如何将“活动”类/ID 添加到“imgdots”div 以进行样式设置?
例如:
假设我在图像 4 上,那么我希望第 4 个“imgdots”div 是另一种颜色。
再次,任何帮助将不胜感激!
编辑
我已经设置了一个包含我迄今为止所拥有的小提琴。最初的图像滑块来自我遵循的教程,并从那里拼凑起来。
这是链接:jsfiddle.net/Reinhardt/cgt5M/8/
user2563629
问问题
90 次
2 回答
1
你见过第n个孩子的css吗?
http://www.w3schools.com/cssref/sel_nth-child.asp
#showContainer:nth-child(4)
{
background:#ff0000;
}
于 2013-10-10T08:01:13.993 回答
0
尝试
/* The jQuery plugin */
(function ($) {
$.fn.simpleShow = function (settings) {
var config = {
'tranTimer': 5000,
'tranSpeed': 'normal'
};
if (settings) $.extend(config, settings);
this.each(function () {
var $wrapper = $(this),
$ct = $wrapper.find('.showContainer'),
$views = $ct.children();
var viewCount = $views.length;
var $imgdotholder = $('<div class="imgdotholder"></div>').appendTo('.wrapper');
for (var i = 0; i < viewCount; i++) {
$('<div class="imgdots"></div>').appendTo($imgdotholder);
}
var $imgdots = $imgdotholder.children();
var timer, current = 0;
function loop() {
timer = setInterval(next, config.tranTimer);
}
function next(idx) {
$views.eq(current).hide();
current = idx == undefined ? current + 1 : idx;
if (isNaN(current) || current < 0 || current >= viewCount) {
current = 0;
}
$views.eq(current).fadeIn(config.tranSpeed);
$imgdots.removeClass('current').eq(current).addClass('current');
}
$imgdots.click(function(){
clearInterval(timer);
next($(this).index());
})
$wrapper.find('.btn_nxt').click(function(){
clearInterval(timer);
next();
});
$ct.hover(function(){
clearInterval(timer);
}, loop);
$views.slice(1).hide();
$imgdots.eq(0).addClass('current');
loop();
});
return this;
};
})(jQuery);
/* Calling The jQuery plugin */
$(document).ready(function () {
/**/
$(".wrapper").simpleShow({
'tranTimer': 3000,
'tranSpeed': 800
});
});
演示:小提琴
于 2013-10-11T07:08:49.717 回答