将 jquery show-hide 与 Dynamic Drive Step Carousel Viewer v1.8 集成时出现问题
我使用的是 Dynamic Drive Step Carousel Viewer v1.8，因此在 #scroll.belt div 中显示一系列项目图像 (div class="panel")。图像面板包含一个隐藏的，其中包含图像的较大版本和一些文本描述。到目前为止，一切都很好。
当用户单击任何图像时，我希望与该图像关联的隐藏
显示并浮动在 #scroll.belt div 上方。我已经成功使用 jquery 显示/隐藏代码在独立面板中创建效果，但我无法让它在多个面板上正常工作（它要么打开所有隐藏的
一次，或者根本没有），我也无法将效果集成到 Step Carousel Viewer 的 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>
I'm using Dynamic Drive Step Carousel Viewer v1.8 so show a series of item images (div class="panel") within a #scroll.belt div. Each image panel includes a hidden <p> containing alarger version of the image and some text description. So far, so good.
When a user clicks on any image, I want the hidden <p> associated with that image to appear and float above the #scroll.belt div. I've had success using jquery show/hide code to create the effect in a stand-alone panel, but I can't get it to work properly on multiple panels (it either opens ALL hidden <p> at one time, or noe at all), nor can have I been able to integrate the effect into the Step Carousel Viewer's onpanelclick:function(target) parameter.
I'm a noob (obviously) and way behind on this delivery, so any help would be appreciated.
Here's the code for the Step Carousel, with the relevant styles included:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我刚刚尝试了您的代码，隐藏或显示正确的代码不是问题，而是您的
p标记的 css 样式设置使其看起来像演示 - 它的作用是将一个显示在另一个之上。由于您使用的是 hide 并 show 它会执行与您预期的 css 想要它执行的操作不同的操作。
它设置 visibility:hidden, visibility:visible: 而不是 display:none ，这就是你的 css 所做的。您需要以不同的方式设置 css 样式设置。下面的 Demo 示例可能就是您想要的。
您的答案
I just tried your code and its not a problem with hiding or showing the correct one, its your css style settings for the
ptag that is making it look like thatDemo - What it does is show one on top of the other. Since you're using hide and show it does something different then what your intended css wants it to do.
It sets visibility:hidden, visibility:visible: instead of display:none which is what your css does. You need to set your css style setting in a different way. The following Demo example is probably what you want.
Your Answer