1
divの画像がいっぱい、右側に10スパンの段落の段落が含まれています。画像は絶対的なものなので、重なり合って重ねて表示され、最初は画像を隠すために負のマージンを持っています。対応する画像がスライドしているときにspanタグにCSSクラスを追加する
フェーズ1（ページが読み込まれ、ユーザーがある範囲を移動する前）では、画像が5秒間隔で設定され、無限に画像をループします。このフェーズとその間隔は、第2段階が発生したときにクリアされます。これは、対応するイメージが表示されるためにスライドするスパンタグにカーソルを合わせたときです。
フェーズ1とフェーズ2がコード化されていますが、私の質問は次のとおりです。フェーズ1では、デフォルトでイメージをアニメーション化するときに対応するスパンタグに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);
}
};
インデントが乱雑な場合は申し訳ありません。
.homeText-hover {
background-color:Lime;
color: White;
cursor: pointer;
}
は、その後、私はあなたのSlideInとslideOutCurrent関数に2行ずつ追加：
ベン
私はあなたのアイデアが気に入っていますが、他のヘルパーメソッドではslideInが使用されているところが複雑になることがあります。私はそれを単純化し、適切なコードをslideInNext関数に追加しましたが、私のコードはあなたのものと似ています。再度、感謝します！ –
私は5時間で私の答えを掲示します。 –
基本的には、オブジェクトを一貫してリンクする関係を見つける必要があります。 –