Question

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

我遇到的另一个问题是图片没有出现在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>

简单的JQuery手风琴幻灯片问题和Firefox浏览器列表问题

0 个答案: