Web ページ (http://www.marketscout.com/various_sites/symposium11/) で機能する jcarousellite プラグインがあります。テキストと画像ベースのコンテンツで垂直にスクロールします。私はすべてが思い通りに見えるようにしていますが、問題はIE8のスクロールがゼロ位置[li]タグから数ピクセル上に始まることです。したがって、実際には最後の [li] で開始され、各 [li] の停止ポイントがわずかにずれます。
各 [li] を赤い枠線で縁取っているので、開始点が少しずれていることがわかります。これを Firefox のように反応させるための助けは素晴らしいでしょう。Firefox では、スクローラーは最初の [li] の上端で開始し、次の [li] に移動すると上端で停止します。何らかの理由で、IE8 が jcarousellite .js ファイルで行われている計算をジャッキングしているようです。私は完全な JQuery 初心者ですが、ダウンロードしたすべての .js ファイルを自分のファイル構造に入れました。
jcarousellite_1.0.1c4.js、jcarousellite_1.0.1.pack.js、および jcarousellite_1.0.1.min.js
余分なピクセル スペース IE がマージンのために css でスローすることで問題が解決する場合があると思いました。しかし、そうではありません。カルーセルの CSS は以下に含まれています。
#newsticker-demo { width:280px;
パディング:5px 5px 0; font-family:Verdana、Arial、Sans-Serif; フォントサイズ:12px; マージン:0px 自動; 境界線: 0px 実線の青; 高さ:295px; }
newsticker-demo a { text-decoration:none; }
newsticker-demo img { border: 0px solid #FFFFFF; }
newsticker-demo .title {
テキスト揃え:中央; フォントサイズ:13px; font-weight:太字; padding-bottom:10px; padding-bottom:8px\9; } .newsticker-jcarousellite { 幅:270px; } .newsticker-jcarousellite li.njl { リストスタイル:なし; 表示ブロック; パディングボトム:3px; マージン: 0px; margin-bottom: -2px\9; ボーダー: 1px ベタの赤。高さ:62px; 高さ:64px; } .newsticker-jcarousellite .thumbnail { float:left; } 幅:60px; 高さ: 60px; ボーダー: 0px ソリッド #FFFFFF; } .newsticker-jcarousellite .info { float:right; 幅:200px; 高さ: 60px; ボーダー: 0px ソリッド #FFFFFF; } .newsticker-jcarousellite .info span.cat { 表示: ブロック; フォントサイズ:10px; 色:#808080; } .clear { クリア: 両方; }
これがJavaScriptです：
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
hoverPause:true,
visible: 4,
start: 0,
auto:1500,
speed:2000
});
});
HTMLは次のとおりです。
<div id="newsticker-demo">
<div class="title">2011 Symposium Speakers</div>
<div class="newsticker-jcarousellite">
<ul>
<li class="njl">
<div class="thumbnail">
<img class="nji" src="images/speakers/RossBuchmuellersm.png" alt="" />
</div>
<div class="info">
<span class="cat"><a href="speakers.asp#RossBuchmueller">Ross Buchmueller</a>
<br/>President and CEO<br/>PURE Risk Management</span>
</div>
<div class="clear"></div>
</li>
<li class="njl">
<div class="thumbnail">
<img class="nji" src="images/speakers/Speaker60.png" alt="" />
</div>
<div class="info">
<span class="cat"><a href="speakers.asp#RobByler">Rob Byler</a>
<br/>President<br/>QBE</span>
</div>
<div class="clear"></div>
</li>
<li class="njl">
<div class="thumbnail">
<img class="nji" src="images/speakers/Speaker60.png" alt="" />
</div>
<div class="info">
<span class="cat"><a href="speakers.asp#PeterEastwood">Peter Eastwood</a>
<br/>CEO<br/>Lexington Insurance</span>
</div>
<div class="clear"></div>
</li>
<li class="njl">
<div class="thumbnail">
<img class="nji" src="images/speakers/RickGulliversm.png" alt="" />
</div>
<div class="info">
<span class="cat"><a href="speakers.asp#RichardGulliver">Richard Gulliver</a>
<br/>President<br/>HUB International</span>
</div>
<div class="clear"></div>
</li>
<li class="njl">
<div class="thumbnail">
<img class="nji" src="images/speakers/AlanKaufmansm.png" alt="" />
</div>
<div class="info">
<span class="cat"><a href="speakers.asp#AlanKaufman">Alan Kaufman</a>
<br/>Chairman, President, & CEO<br/>Burns & Wilcox</span>
</div>
<div class="clear"></div>
</li>
<li class="njl">
<div class="thumbnail">
<img class="nji" src="images/speakers/Speaker60.png" alt="" />
</div>
<div class="info">
<span class="cat"><a href="speakers.asp#RichardKerr">Richard Kerr</a>
<br/>Founder and CEO<br/>MarketScout</span>
</div>
<div class="clear"></div>
</li>
<li class="njl">
<div class="thumbnail">
<img class="nji" src="images/speakers/Speaker60.png" alt="" />
</div>
<div class="info">
<span class="cat"><a href="speakers.asp#MichaelHLee">Michael H. Lee</a>
<br/>Chairman, President and CEO<br/>Tower Group Companies</span>
</div>
<div class="clear"></div>
</li>
<li class="njl">
<div class="thumbnail">
<img class="nji" src="images/speakers/Speaker60.png" alt="" />
</div>
<div class="info">
<span class="cat"><a href="speakers.asp#JayPoorman">Jay Poorman</a>
<br/>Managing Director<br/>StoneRidge Advisors, LLC</span>
</div>
<div class="clear"></div>
</li>
<li class="njl">
<div class="thumbnail">
<img class="nji" src="images/speakers/Speaker60.png" alt="" />
</div>
<div class="info">
<span class="cat"><a href="speakers.asp#SusanRivera">Susan Rivera</a>
<br/>CEO<br/>V3</span>
</div>
<div class="clear"></div>
</li>
<li class="njl">
<div class="thumbnail">
<img class="nji" src="images/speakers/Speaker60.png" alt="" />
</div>
<div class="info">
<span class="cat"><a href="speakers.asp#DougTeegan">Doug Teegan</a>
<br/>Managing Director<br/>Lloyd's America, Inc.</span>
</div>
<div class="clear"></div>
</li>
<li class="njl">
<div class="thumbnail">
<img class="nji" src="images/speakers/HankWatkinssm.png" alt="" />
</div>
<div class="info">
<span class="cat"><a href="speakers.asp#HankWatkins">Hank Watkins</a>
<br/>President<br/>Lloyds America, Inc.</span>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
助けてくれてありがとう！