Javascript 当相应的图像滑入时，向span标记添加CSS类

我有一个两阶段的动画，包括一个充满图像的div，右边是一段10个句子。这些图像是绝对的，因此它们堆叠在彼此的顶部，并且最初有一个负边距，以通过溢出：隐藏来隐藏图像

在第1阶段（页面加载时，在用户将鼠标悬停在跨距上之前），将每个图像设置为5秒的间隔，以无限方式循环浏览图像。当第二阶段发生时，此阶段及其间隔将被清除，即当您将鼠标悬停在span标记上时，相应的图像将滑入视图

我已经对第1阶段和第2阶段进行了编码，但我的问题是：在第1阶段，我必须实现它，以便在默认情况下，当它通过图像设置动画时，相应的span标记必须有一个CSS类，就像在第2阶段将鼠标悬停在span标记上一样

如果有人想摆弄它，下面是代码：

<!--begin:content-->
                <div id="content">

                        <div id="pics">
                            <img src="ADD ANY IMAGE" id="defaultImg" alt="" />
                            <img src="ADD ANY IMAGE" id="hover_1_pic" alt="" />
                            <img src="ADD ANY IMAGE" id="hover_2_pic" alt="" />
                            <img src="ADD ANY IMAGE" id="hover_3_pic" alt="" />
                            <img src="ADD ANY IMAGE" id="hover_4_pic" alt="" />
                            <img src="ADD ANY IMAGE" id="hover_5_pic" alt="" />
                            <img src="ADD ANY IMAGE" id="hover_6_pic" alt="" />
                            <img src="ADD ANY IMAGE" id="hover_7_pic" alt=""  />
                            <img src="ADD ANY IMAGE" id="hover_8_pic" alt="" />
                            <img src="ADD ANY IMAGE" id="hover_9_pic" alt="" />
                            <img src="ADD ANY IMAGE" id="hover_10_pic" alt="" />
                        </div>

                        <!--begin: homeText - block of span tags w/text referenced in jQuery -->
                        <div class="homeText">    
                            <p>
                                <span id="hover_1" >evolve water.</span>
                                <span id="hover_2">stream the party.</span>
                                <br />
                                <span id="hover_3">let moms play.</span>
                                <span id="hover_4">play on big screens.</span>
                                <br /> 
                                <span id="hover_5">turn txt into sport.</span>
                                <span id="hover_6">have 18 wheels.</span>
                                <br />
                                <span id="hover_7">have chapters.</span>
                                <span id="hover_8">personify an issue.</span>
                                <br />
                                <span id="hover_9">transform neighborhoods.</span>
                                <br />
                                <span id="hover_10">become keepsakes</span>
                            </p>
                        </div>

            </div><!--end content-->

JS脚本

$('document').ready(function () {
slideIn('defaultImg');
timer = setInterval('slideInNext()', 5000);
functionHover();
});

var slideSpeed = 500;

var slideIn = function (id) {
$('#' + id).addClass('active').animate({ 'margin-left': '0px' }, { 'duration':             slideSpeed, 'easing': 'swing', 'queue': true });
}
var slideOutCurrent = function () {
$('#pics img.active').removeClass('active').animate({ 'margin-left': '325px' }, {     'duration': slideSpeed, 'easing': 'swing', 'queue': true, 'complete': function () {         $(this).css('margin-left', '-325px'); } });
}

var slideInNext = function () {
var curImage = $('#pics img.active');
var nextImage = curImage.next();
if (nextImage.length == 0) {
    nextImage = $('#pics img:first');
}
slideOutCurrent();
slideIn(nextImage.attr('id'));
}

var queueToSlideIn = [];
var mouseOnTimer = null;
var mouseOffTimer = null;

var functionHover = function () {
$('.homeText span').hover(
//binding 2 handlers to hover event
function () {   //when hovering over a span - mousenenter
    clearTimeout(mouseOffTimer);
    clearInterval(timer);
    var thisId = $(this).attr('id');
    mouseOnTimer = setTimeout(function () {
        if (!$('#' + thisId + '_pic').hasClass('active')) {
            addToQueue(thisId + '_pic');
        }
    }, 300);
},
function () {   //when off of span - mouseleave
    clearTimeout(mouseOnTimer);
    mouseOffTimer = setTimeout(function () {
        if (!$('#defaultImg').hasClass('active')) {
            addToQueue('defaultImg');
        }
    }, 500);
}
);
$('.homeText span').click(function () {
    //set current span on click
    $span = $(this).attr('id');
    //navigate to corresponding case study
    var href = $('#' + $span + '_pic').attr('alt');
    window.location.href = href;
});
}

var addToQueue = function (id) {
queueToSlideIn.push(id);
$('#pics').queue(function () { animateNext(); $(this).dequeue(); }).delay(slideSpeed);
}

var animateNext = function () {
if (queueToSlideIn.length > 0) {
    var id = queueToSlideIn.shift();
    slideOutCurrent();
    slideIn(id);
}
};

如果缩进很乱，很抱歉

---

Ben

我添加了一个新类，它是您的hover类的副本：

    .homeText-hover {
background-color:Lime;
color: White;
cursor: pointer;
}

然后，我在SlideIn和slideOutCurrent函数中分别添加了两行：

var slideIn = function (id) {
var slId = id.split('_pic');
$('#' + slId[0]).addClass('homeText-hover');
$('#' + id).addClass('active').animate({ 'margin-left': '0px' }, { 'duration':             slideSpeed, 'easing': 'swing', 'queue': true });
}
var slideOutCurrent = function () {
var slId = $('#pics img.active').attr('id').split('_pic');
$('#' + slId[0]).removeClass('homeText-hover');
$('#pics img.active').removeClass('active').animate({ 'margin-left': '325px' }, {     'duration': slideSpeed, 'easing': 'swing', 'queue': true, 'complete': function () {         $(this).css('margin-left', '-325px'); } });
}

---

您的自动滑动无法在FF中运行…

将此代码片段添加到my slideInNext函数中以获得所需的结果：

if (nextImage.attr('id') != "defaultImg") {
    //add class to corresponding span tag of current image
    var spanId = nextImage.attr('id');
    //corresponing span of next image
    spanId = spanId.substring(0, spanId.length - 4);
    $('#' + spanId).addClass('span-background-change');
}

---

我刚刚在javascript中使用了substring方法来分离images属性id，并将其放在一个局部变量中以表示span id。

我喜欢你的解决方案，Ben。使用相同的选择标识属性原则的另一个解决方案是向每个元素添加一个对每个img跨度对唯一的类，以便每个元素与其对应的元素共享一个特定的类

下面是关于使用类作为标志的说明，我最初将其发布在一个不同问题的解决方案中，该解决方案后来被关闭：

类作为标志

向元素添加一个类并不总是意味着您将给它一些新的CSS样式。CSS是一种使用类来帮助识别元素以特定方式进行样式化的语言；类的唯一目的不是将CSS应用于元素。如果不是这样，CSS将只能通过使用类来设置元素的样式，而不能通过使用其他选择器（ID、父对象、子对象、子对象等）来设置元素的样式

开发人员通常使用类作为“标志”。标志是一种关于特定元素的信号传递方式，无需将该信息存储在变量中。例如，假设您有一个元素列表，通过CSS类，所有元素的样式都完全相同。如果开发人员希望以特定的方式标记此列表中的每个其他元素（供以后使用），而不更改元素的样式，他可以选择向元素添加第二个名为“alternate”的类

---

您可以向一个元素添加任意数量的类，添加多个没有任何关联样式的类是完全可以接受的编码样式（前提是这些类用于其他用途-脚本等）。

我喜欢您的想法，但在其他帮助器方法中使用slideIn时，可能会变得复杂。虽然我的代码与您的代码类似，但我将其简化，并向slideInNext函数添加了适当的代码。再次感谢！我将在5小时内发布我的答案。基本上，你需要找到一种能够持续链接你的对象的关系。

if (nextImage.attr('id') != "defaultImg") {
    //add class to corresponding span tag of current image
    var spanId = nextImage.attr('id');
    //corresponing span of next image
    spanId = spanId.substring(0, spanId.length - 4);
    $('#' + spanId).addClass('span-background-change');
}