1

我正在使用 Dynamic Drive Step Carousel Viewer v1.8 显示一系列项目图像（div class="panel")在#scroll.belt div.每个图像面板中包含一个隐藏<p>的图像，其中包含更大版本的图像和一些文本描述。到目前为止，一切都很好。

当用户单击任何图像时，我希望<p>与该图像关联的隐藏项出现并浮动在#scroll.belt div 上方。我已经成功使用 jquery 显示/隐藏代码在独立面板中创建效果，但我无法让它在多个面板上正常工作（它要么<p>一次打开全部隐藏，要么根本不打开） ，也无法将效果集成到 Step Carousel Viewer 的onpanelclick:function(target)参数中。

我是一个菜鸟（显然）并且在这次交付方面落后了，所以任何帮助将不胜感激。

这是 Step Carousel 的代码，包括相关样式：

  <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>
4

1 回答 1

0

我刚刚尝试了您的代码，隐藏或显示正确的代码没有问题，它的p标签的 CSS 样式设置使它看起来像那样

演示- 它的作用是将一个显示在另一个之上。由于您正在使用 hide 并 show 它做的事情与您预期的 css 希望它做的事情不同。

它设置了visibility:hidden，visibility:visible : 而不是display:none这是你的 CSS 所做的。您需要以不同的方式设置您的 css 样式设置。下面的 Demo 例子可能就是你想要的。

你的答案

于 2009-10-29T15:23:29.517 回答