您好,我正在使用简单的 js 滑块进行图像滑动。我想每张幻灯片显示 3 张图片。这是我的js代码
<?php
$slide = true;
$noOfItems = 3;
//count($this->statSummary['top_products_data'] is having 5
if (count($this->statSummary['top_products_data']) <= $noOfItems) {
$slide = false;
}
?>
$(document).ready(function(){
$("#slider").easySlider({
hoverStop:false,
auto: false,
hoverStop:false,
continuous: false,
controlsFade:true,
<?php if ($slide) { ?>
controlsShow: true,
<?php } else { ?>
controlsShow: false,
<?php } ?>
verticalHeight: 150
});
});
现在发生了什么,它显示了三张带有下一个箭头的图片,当我单击下一个按钮时,一个图像幻灯片和其他图像出现,它还显示上一个按钮。但它再次显示前 2 张图像(重复这些图像),然后下一个箭头消失。我不知道为什么会这样。谁能告诉我如何停止前两张图像的重复?
这是我的html
<li class="rate sliderli">
<div id="slider">
<ul>
<?php
if (isset($this->statSummary['top_products_data']))
{
foreach ($this->statSummary['top_products_data'] as $top_product)
{
?><li><img src="<?php echo $top_product['image_small']; ?>" alt="<?php echo $top_product['product_name']; ?>"/></li><?php
}
}
?>
</ul>
</div>
</li>
我的 CSS 看起来像
#slider{
width: 474px;
margin:10px auto;
}
#slider li{
width: 150px;
height: 150px;
}
#summaryBox ul li.sliderli{
position: relative;
width: 650px;
}