1
我有一個包含全部圖像的div的兩階段動畫，右側是一段10個span語句。圖像是絕對的，所以它們堆疊在一起，並且最初具有負邊距以隱藏圖像，通過溢出：隱藏。當相應的圖像滑動時，將CSS類添加到span標記中
在第1階段（頁面加載時和用戶懸停在某一範圍之前），圖像每隔5秒設置一次，以無限的方式循環顯示圖像。當第二個階段發生時，這個階段和間隔將會清除，當您將鼠標懸停在跨度標籤上時，對應的圖像將滑動到該標籤中進行查看。
我有階段1和階段2編碼，但我的問題是：在階段1，我必須實現它，以便當它默認動畫通過圖像時，相應的span標籤必須具有CSS類當你將鼠標懸停在span標記在階段2
這裏是代碼，如果有人想擺弄它：
<!--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);
}
};
對不起，如果縮進是凌亂。
本
我喜歡你的想法，但在其他輔助方法中使用slideIn時會變得複雜。我保持簡單，並將相應的代碼添加到slideInNext函數中，儘管我的代碼與您的代碼很相似。再次感謝！ – 2012-02-16 16:55:45
我會在5個小時內發佈我的答案。 – 2012-02-16 16:58:21
基本上你需要找到一個連貫的關係來連接你的對象。 – 2012-02-16 17:04:21