js在浏览器中不执行怎么办？

Question

我做的就是四张图片轮回出现，然后再Edge里面是能实现的。但是在Safari中第一张出现后就直接没有了 。我自己感觉问题是出现在Safari 不能正常调试<ul>中的onmouseout方法上或者是opacity这个属性上。希望有哪位大神可以帮帮忙 帮我找出解决问题的方法。谢谢啦js部分：s = 2; function a() {     for (i = 1; i <= 4; i++) {         document.getElementById(i).style.opacity = '0';     }     document.getElementById(s).style.display = 'block';     document.getElementById(s).style.opacity = '1';     s++;     if (s > 4) s = 1;     } t = setInterval("a()", "2000"); function c() { t=setInterval("a()", "2000");} function b() { clearInterval(t); }css部分：.q li     {     position:absolute;       display:none;     transition: opacity 2s;     opacity:0;     list-style:none;     }html部分：<ul onmouseover="b()" onmouseout="c()" class="q">   <li id="1" style="display:block;opacity:1;"><img style="z-index:1;" src="image/1.jpg" />        <div class="r">      <span class="c">1 of 4</span>      <a href="http://www.baidu.com" target=_blank class="t">学院是浙江省人才培养模式创新实验区</a>      </div>            <div class="qiehuan">     <div class="qiehuan1">      <a href="javascript:;" onclick="e()"  > <font color="white" size="10px" >‹</font></a>      </div>          <div class="qiehuan2" >        <a href="javascript:;" onclick="f()"> <font color="white" size="10px" >›</font></a>          </div>       </div>  </li>  <li id="2"><img style="z-index:2;" src="image/2.jpg" />        <div class="r">      <span class="c">2 of 4</span>       <a href="http://www.baidu.com" target=_blank class="t">学院是浙江省人才培养模式创新实验区</a>      </div>                <div class="qiehuan">     <div class="qiehuan1">      <a href="javascript:;" onclick="e()"> <font color="white" size="10px">‹</font></a>      </div>          <div class="qiehuan2" >        <a href="javascript:;" onclick="f()"> <font color="white" size="10px">›</font></a>          </div>       </div>  </li>  <li id="3" ><img style="z-index:3;" src="image/3.jpg" />        <div class="r">      <span class="c">3 of 4</span>       <a href="http://www.baidu.com" target=_blank class="t">学院是浙江省人才培养模式创新实验区</a>      </div>      <div class="qiehuan">     <div class="qiehuan1">      <a href="javascript:;" onclick="e()"> <font color="white" size="10px">‹</font></a>      </div>          <div class="qiehuan2" >        <a href="javascript:;" onclick="f()"> <font color="white" size="10px">›</font></a>          </div>       </div>  </li>  <li id="4"><img style="z-index:4;" src="image/4.jpg" />       <div class="r">      <span class="c">4 of 4</span>       <a href="http://www.baidu.com" target=_blank class="t">学院是浙江省人才培养模式创新实验区</a>      </div>      <div class="qiehuan">     <div class="qiehuan1">      <a href="javascript:;" onclick="e()"> <font color="white" size="10px">‹</font></a>      </div>          <div class="qiehuan2" >        <a href="javascript:;" onclick="f()"> <font color="white" size="10px">›</font></a>          </div>       </div>  </li> </ul>