私はDynamic Drive Step Carousel Viewer v1.8を使用しているので、一連のアイテム画像を表示します（各画像パネルdiv class="panel")内には、画像の拡大バージョンといくつかのテキスト説明を含む非表示が含まれています。これまでのところ、とても良い.#scroll.belt div.<p>
ユーザーが任意の画像をクリックする<p>と、その画像に関連付けられた非表示が表示され、#scroll.belt div の上に浮かびます。jquery show/hide コードを使用してスタンドアロン パネルで効果を作成することに成功しましたが、複数のパネルで適切に動作させることができません (すべての非表示<p>を一度に開くか、まったく開けません)。 、効果をステップ カルーセル ビューアーのonpanelclick:function(target)パラメーターに統合することもできませんでした。
私は（明らかに）初心者であり、この配信に遅れをとっています。
関連するスタイルが含まれているステップ カルーセルのコードを次に示します。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/stepcarousel.js"></script>
<script> $(document).ready(function(){
$("img.showr").click(function () {
$(this).next('p').show("slow");
});
$("img.hidr").click(function () {
$(this).parent('p').hide(2000);
});
});
</script>`<script type="text/javascript">
stepcarousel.setup({
galleryid: 'scroll', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:0},
panelbehavior: {speed:3000, wraparound:true, persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/chrome-l.png', -25, 200], rightnav: ['images/chrome-r.png', -10, 200]},
statusvars: ['statusA', 'statusB', 'statusC'], // Register 3 "status" variables
contenttype: ['inline'] // content type <--No comma following the very last parameter, always!
//optional parameter
//onpanelclick:function(target){
//custom code here.
//}
})
</script>
<style>
p { background:#FFFFFF; margin:3px; width:300px;
display:none; position:absolute; left:45%; top: -20px; text-align:left; z-index: 3000; }
.over { z-index: 3000; }
</style>
<link href="style-tl.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="scroll" class="stepcarousel">
<div class="belt">
<div class="panel"><img id="showr" class="showr" src="images/1.jpg" width="200px" height="300px" alt="light1" />
<p><img id="hidr" class="hidr over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
<br />
Display item text description<br />
$price</p></div>
<div class="panel">
<img id="showr" class="showr" src="images/2.jpg" width="200px" height="300px" alt="light1" />
<p><img id="hidr" class="hidr over" src="images/2.jpg" width="300px" height="450px" alt="light1" /> <br />
<br />
Display item text description<br />
$price</p></div>
</div>
</div>