0

我正在使用原型滑块，当它碰到最后一张幻灯片时，滑块会再次启动，但会跳过打开的图像。

有人可以看看我的代码吗？

我的 HTML：

<div id="carousel-wrapper">
<div id="carousel-content">
<div id="slide1" class="slide" > 
<div >Slide 1</span></div>
<div id="slide2" class="slide" > 
<div >slide 2</span></div>
<div id="slide3" class="slide" > 
<div >Slide 3</span></div>
<div id="slide4" class="slide" > 
<div >Slide 4</span></div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
            Slider = new Carousel($('carousel-wrapper'), $$('#carousel-wrapper .slide'), $$(' a.carousel-jumper', 'a.carousel-control'), { duration: 0.5, auto: true, frequency: 5, circular: 'false', effect: 'slide', wheel: 'false',   selectedClassName: 'selected'});
// ]]></script>

我的 CSS：

#carousel-wrapper {
width: 785px;
height: 540px;
overflow: hidden;
}
#carousel-content {
width: 3640px;
}
.cms-page-view .breadcrumbs {display:none;}
#carousel-content .slide {
float: left;
width: 785px;
height: 540px;
}
div#slide1{background-image:url("slide-1.jpg");}
div#slide2{background-image:url("slide-2.jpg");}
div#slide3{background-image:url("slide-3.jpg");}
div#slide4{background-image:url("slide-4.jpg");}

同样，这是在基于 Magento 的站点中使用原型库。

网址是 wwwdotlylifdotcom/home

4

1 回答 1

1

在您添加的Carousel 小部件中，有以下说明：

默认情况下，当到达第一张/最后一张幻灯片时，调用 prev/next 什么都不做。如果您希望效果继续，您必须做两件事：将循环参数设置为 true 并复制 HTML 中的第一张幻灯片。这是给人一种连续运动印象的唯一方式。

所以你需要在“Slide 4”之后添加一个“Slide 1”的额外副本。

于 2011-10-10T20:45:03.867 回答