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