当相应的图像滑入时，将CSS类添加到span标记中

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

在阶段1（当页面加载时，在用户悬停在跨度上之前），图像被设置为每个图像5秒的间隔，以无限的方式循环通过图像。当第二个阶段发生时，这个阶段及其间隔将被清除，也就是当您将鼠标悬停在跨度标记上时，相应的图像将滑入其中进行查看。

我已经对第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-->

CSS

#pics img {
height: 131px;
width: 334px;
position: absolute;
margin-left:-325px;
}
/*  ADDED by ben sewards   */
#pics {
height:179px;
width:335px;
position: relative;
overflow: hidden;
margin:0px;
padding-top:15px;
margin-left:49px;
float:left;
}
/*  ADDED by ben sewards   */
.homeText {
width:600px;
height:240px;
padding-left:15px;
padding-top: 10px;
overflow: hidden;
float:left;
}
.homeText p {
line-height: 115%;
font-family: @Adobe Fangsong Std R;
font-size: 2.6em;
font-weight:bolder;
color: #c0c0c0;
margin: 0px;
}
.homeText span:hover {
background-color:Lime;
color: White;
cursor: pointer;
}
.span-background-change {
background-color:Lime;
color: White;
}

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