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>