問題が発生しました。この jquery について頭を悩ませることができません。あなたの助け/ガイダンスをいただければ幸いです。
必要な機能:
各メニュー リストには、クリックしたときにスクロールし、マウス オーバーしたときにスクロールする画像が含まれています。マウスをホバーすると、設定された間隔の制限時間内に画像がスクロールされます。
スクロールしたら、さらに機能を探しますが、少なくとも現時点で機能することができれば幸いです
究極の機能: マウスアウト時にアニメーションを停止するには、.wrap を使用したより効率的なコーディングが含まれる可能性があり、マウスが画像 div の上にあるときに画像を一時停止することもできます。
ここに私が書いたJqueryがありますが、うまくいきません。
$(function() {
$('.main-img ul').cycle({
fx: 'fadeout',
height: 458,
speed: 300,
timeout: 0,
pager:'.menu ul li',
pagerEvent: 'click',
pagerAnchorBuilder: function(idx, slide) {
return '.menu ul li:eq(' + idx + ') a';
},
after: function(){
// start new sub animaion
},
before: function(){
// stop the current animation
}
});
});/*
ここにhtmlがあります
<div class="main-cont">
<div class="menu">
<div class="portfolio"><span>Portfolio</span></div>
<ul>
<li><a href="#" class="camp-txt"><span>One</span></a></li>
<li><a href="#" class="edit-txt"><span>Two</span></a></li>
<li><a href="#" class="ad-txt"><span>Three</span></a></li>
<li><a href="#" class="bio-txt"><span>Four</span></a></li>
<li><a href="#" class="vid-txt"><span>Five</span></a></li>
</ul>
<div class="footer"><span>Footer</span></div>
</div>
<div class="main-img">
<ul>
<li><ul>
<li><img src="images/port/1.jpg" width="597" height="453" alt="img" /></li>
<li><img src="images/port/2.jpg" width="597" height="453" alt="img" /></li>
<li><img src="images/port/3.jpg" width="597" height="453" alt="img" /></li>
</ul></li>
<li><ul>
<li><img src="images/port/4.jpg" width="597" height="453" alt="img" /></li>
<li><img src="images/port/5.jpg" width="597" height="453" alt="img" /></li>
<li><img src="images/port/6.jpg" width="597" height="453" alt="img" /></li>
</ul></li>
<li><ul>
<li><img src="images/port/7.jpg" width="597" height="453" alt="img" /></li>
<li><img src="images/port/8.jpg" width="597" height="453" alt="img" /></li>
</ul></li>
<li><ul>
<li><img src="images/port/9.jpg" width="597" height="453" alt="img" /></li>
<li><img src="images/port/10.jpg" width="597" height="453" alt="img" /></li>
</ul></li>
<li><ul>
<li><img src="images/port/11.jpg" width="597" height="453" alt="img" /></li>
<li><img src="images/port/12.jpg" width="597" height="453" alt="img" /></li>
</ul></li>
</ul>
</div>