jQuery Roundabout:更改显示的项目数

时间:2012-01-20 23:04:15

标签: jquery jquery-plugins carousel

我正在使用jQuery Roundabout插件。我想知道是否有办法选择显示的图片数量。我有十张图片,但只有三张图片应该可见,如“square”示例中的第二个(扩展名)链接所示。

这怎么可能?

使用更多信息进行编辑:

jquery roundabout-plugin:http://fredhq.com/projects/roundabout

和扩展名:http://fredhq.com/projects/roundabout-shapes/

- >我想要“方形”

相关代码:

<head>
<style>
.roundabout-holder {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  height: 500px;
  width: 300px;
}

.roundabout-moveable-item {
  cursor: pointer;
  border: 1px solid #999;
  bottom: 0;
}

.roundabout-in-focus {
  cursor: auto;
}
</style>

<script type="text/javascript" src="../../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery.roundabout.js"></script> 
<script type="text/javascript" src="../../js/jquery.roundabout-shapes.js"></script> 

<script>
   $(document).ready(function() {
      $('ul.roundabout-holder').roundabout({
         shape: 'square',
         btnNext: ".next",
         btnPrev: ".prev",
         btnStopAutoplay: ".stop",       
         btnStartAutoplay: ".start",                 
         duration: 1000,
         autoplay: true,
         autoplayDuration: 4000,         
         autoplayPauseOnHover: true,
         reflect: false,
         minOpacity: 0.5,
         minScale: 0.1
      });
   });
</script>  



</head>

<body>

<ul class="roundabout-holder">
    <li class="roundabout-moveable-item"><a href="img/hauptbild-gross.jpg"><img src="img/hauptbild.jpg" width="466" height="500" /></a></li>                
    <li class="roundabout-moveable-item"><a href="img/baerenfamilie-gross.jpg"><img src="img/baerenfamilie.jpg" width="400" height="196" /></a></li>
    <li class="roundabout-moveable-item"><a href="img/hamster-bleistift-gross.jpg"><img src="img/hamster-bleistift.jpg" width="400" height="351" /></a></li>
    <li class="roundabout-moveable-item"><a href="img/hamster-schlafend-gross.jpg"><img src="img/hamster-schlafend.jpg" width="400" height="302" /></a></li>
    <li class="roundabout-moveable-item"><a href="img/hamster-schmetterling-gross.jpg"><img src="img/hamster-schmetterling.jpg" width="400" height="374" /></a></li>
    <li class="roundabout-moveable-item"><a href="img/hase-gross.jpg"><img src="img/hase.jpg" width="384" height="500" /></a></li>
</ul>



</body>

</html> 

这是项目网址: http://www.eyes-on-fire.de/test/2/portfolio/tiere/index.php

(我不允许发布三个链接作为新手)

1 个答案:

答案 0 :(得分:-1)

没有太多细节:

maxScale: 1,
minScale: 0.7

应该这样做。

我们的想法是根据适用的容器宽度/高度调整minScalemaxScale,以便准确查看要查看的图片/幻灯片的数量。