jquery - 単純なJQueryアコーディオンスライドショーの問題とFirefoxブラウザリストの問題

Question

作成した単純なアコーディオンのスライドショーで奇妙な問題が発生しています。目標は、5秒ごとに自動的に無限にスクロールし、特定の画像がクリックされるたびにタイマーを再起動することです。それはうまく機能しているようです、それは無期限にスクロールし、画像をクリックすると正しい画像に切り替わります。しかし、画像をクリックしてタイマーを再起動すると、最後のアイテムに到達した後、最初の画像へのループバックが停止し、そこでスタックしているように見えます。これが混乱しないことを願っています。基本的に、リスト項目をクリックしてからリストの最後に到達するまで、すべてが機能します。

私が抱えているもう1つの問題は、写真がFirefoxブラウザーに表示されず、リストスタイルの代替テキストだけが表示されることです。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>