jQuery - jCarouselLite - 图像未显示答案

【问题标题】：jQuery - jCarouselLite - Images are not showing upjQuery - jCarouselLite - 图像未显示
【发布时间】：2010-07-09 14:46:15
【问题描述】：

我已将 jCarouselLite 与我已经工作的站点合并，但是出现了 PREV 和 NEXT 按钮，但没有图像。图片链接正确。

有什么想法吗？

jQUERY：

<script type="text/javascript">
    //jCarouselLite
    $(function() {
        $(".slider").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: 4
    });
});
</script>

HTML：

<div id="list">           
<div class="prev"><img src="images/prev.jpg" alt="prev" /></div>
<div class="slider">
<ul>
<li><a href="#" title="Title 1"><img src="images/store_item_img.jpg" alt="Image 1" class="captify" /></a></li>
<li><a href="#" title="Title 2"><img src="images/store_item_img.jpg" alt="Image 2" class="captify" /></a></li>
<li><a href="#" title="Title 3"><img src="images/store_item_img.jpg" alt="Image 3" class="captify" /></a></li>
<li><a href="#" title="Title 4"><img src="images/store_item_img.jpg" alt="Image 4" class="captify" /></a></li>
<li><a href="#" title="Title 5"><img src="images/store_item_img.jpg" alt="Image 5" class="captify" /></a></li>
<li><a href="#" title="Title 6"><img src="images/store_item_img.jpg" alt="Image 6" class="captify" /></a></li>
<li><a href="#" title="Title 7"><img src="images/store_item_img.jpg" alt="Image 7" class="captify" /></a></li>
<li><a href="#" title="Title 8"><img src="images/store_item_img.jpg" alt="Image 8" class="captify" /></a></li>
</ul>
</div>
<div class="next"><img src="images/next.jpg" alt="next" /></div> 
</div>

CSS：

.slider {
 background-color:#3399FF;
 float:left;
 margin:15px; 
 position:relative; 
 visibility:hidden; 
}

.slider ul {
 height:180px;
 width:840px; 
}

.slider ul li {
 padding:0 20px;
}

.slider ul li img {
 cursor:pointer;
 height:150px; 
 padding-top:3px;
 width:180px;  
}

.prev {
 cursor:pointer; 
 float:left;
 padding-top:90px;
}

.next {
 cursor:pointer; 
 float:right; 
 padding-top:90px;
}

脚本：

<script type="text/javascript" src="http://www.theratio.net/js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="js/captify.tiny.js"></script>

请帮忙？

更新：

如果我删除

  $("#store_container").hide();

..让它看起来像这样，它可以工作，但是 div 首先打开而不是关闭。

<script type="text/javascript">
$(function(){
  $('#toggle').toggle(function(){
     $('#store_container').slideDown("slow", function() { $('#store_data').fadeIn(); });
   }, function() {
     $('#store_data').fadeOut("fast", function() { $('#store_container').slideUp("slow"); });
  });
});
</script>

如何使用 .hide 关闭 #store_container？或者有没有办法在功能点击后显示？

【问题讨论】：

在问题标题中大喊大叫肯定会被忽略。
+1 用于标题更正。好多了。
我花了一段时间才知道如何编辑它，抱歉引起骚动。第二个问题，所以我在这里有点新。

标签： jquery css jcarousel html

【解决方案1】：

我对 jCarouselLite 一无所知，但在您的风格中，您的 .slider 设置为 visibility:hidden;，我在您的代码中看不到任何使其可见的内容。

编辑：

别忘了：

$('document').ready(function(){
    // my jquery javascript code
})

【讨论】：

我已经删除了这个属性，希望能解决这个问题，但不幸的是它没有。
我从这里得到了教程：onextrapixel.com/2009/04/28/…
这就是您的 Javascript 的全部内容吗？在上面的例子中，你没有 jQuery 的 $('document').ready()
@patrick：你可以在这里查看项目：theratio.net/bickelampco 点击商店，图片应该出现在 PREV 和 NEXT 之间。
对我来说，滑动打开后什么都没有显示。只是黑色空间。本教程展示了一个 $('img.captify').captify({ });需要从 jQuery 的 $('document').ready() 中调用的函数。你这样做吗？

【解决方案2】：

您确定已正确包含 jQuery 和 jCarouselLite 脚本吗？ Firebug 是否显示脚本？有什么错误吗？

【讨论】：

我在 .slider ul li img {} 下的 CSS 中将图像设置为 150x180 我也添加了上面的 javascript。谢谢你的帮助，我真的很感激
@iamtheratio> 是的，我在发布后注意到了你的 CSS 规则，并编辑了我的帖子，我的错。我正在寻找一个特定的 img 规则并通过了规则集。

【解决方案3】：

你弄明白了吗？图片需要它们的高度和宽度属性。

【讨论】：