1

我创建的一个简单的手风琴幻灯片有一个奇怪的问题。目标是让它每 5 秒自动无限滚动一次，然后在单击特定图片时重新启动计时器。它似乎工作得很好，它将无限滚动并单击图片切换到正确的图片。但是，当我单击一张图片并且计时器重新启动时，它似乎在到达最后一项后停止循环回到第一张图片并卡在那里。我希望这不会令人困惑。基本上，在单击任何列表项后，一切都可以正常工作，直到到达列表末尾。

我遇到的另一个问题是图片没有出现在 Firefox 浏览器中，只是列表样式中的 alt 文本。我无法弄清楚我的 Firefox 浏览器的 CSS 需要有什么不同。

谢谢！

这是Javascript：

<script type="text/javascript">
$(function(){

activeItem = $("#slideshow li:first");
$(activeItem).addClass('active');

timeoutID = setTimeout(autoscroll, 5000);

function autoscroll(){
if($(activeItem).is("#slideshow li:last")){next = $("#slideshow li:first");}    
else{next = $(activeItem).next("#slideshow li");}
$(activeItem).animate({width: "75px"}, {duration:300, queue:false});
$(next).animate({width: "850px"}, {duration:300, queue:false});
activeItem = next;
timeoutID = setTimeout(autoscroll, 5000);}

$("#slideshow li").click(function(){
clearTimeout(timeoutID);
$(activeItem).animate({width: "75px"}, {duration:300, queue:false});
$(this).animate({width: "850px"}, {duration:300, queue:false});
activeItem = this;
timeoutID = setTimeout(autoscroll, 5000);
});

});</script>

随之而来的 CSS：

#container{
width: 1100px;
margin: auto;
border: 1px solid black;}

#slideshow{
list-style: none;
margin: 0px;
padding: 0px;
height: 400px;}

#slideshow li{
float: left;
display: block;
height: 400px;
width: 75px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}

#slideshow li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;}

#slideshow li.active {
width: 850px;}

HTML 只是一个简单的列表（图像已本地化）：

<div id="container"> 
 <ul id="slideshow">
  <li><a><img src="C:\Users\Scott\Google Drive\Website\Bella Bri.jpg" alt="boat"></a>   </li>
  <li><a><img src="C:\Users\Scott\Google Drive\Website\DREAMHACK-UCOS.jpg" alt="comp"></a></li>
  <li><a><img src="C:\Users\Scott\Google Drive\Website\manda-bay-lamu.jpg" alt="beach"></a></li>
  <li><a><img src="C:\Users\Scott\Google Drive\Website\car-picture.jpg" alt="car"></a></li>
 </ul>
</div>
4

0 回答 0