0

我有一个横幅旋转器 JQuery 脚本在我的页面顶部运行，淡入淡出图像。它在除 IE 之外的所有浏览器中都能完美运行。边框位于正确的位置，但图像向右移动。我玩过，发现这是由于我的绝对定位。

#bannerRotator { width:969px; height:226px; margin:20px auto; background:white; border-    style: solid; border-width:5px; border-color:white; border-radius: 10px;}
#bannerRotator ul li img{ max-width:969px; max-height:226px; }

#bannerRotator { position:relative; }
#bannerRotator ul { list-style:none; padding:0; position:relative; margin:0; }
#bannerRotator ul li { display:none; position:absolute; left:0px;}
#bannerRotator ul li a { text-decoration:none; }
#bannerNav { position:absolute; right:15px; bottom:15px; background:url(./img/transBlack75.png) repeat 0 0; padding:5px 5px 5px 10px; }
#bannerNav a { margin:3px 10px 0 0; height:10px; width:10px; display:block; background:url(./img/dotDark.png) no-repeat 0 0; float:left; }
#bannerNav a.active { background-image:url(./img/dotLight.png); }
#bannerNav span.pause, #bannerNav span.play { cursor:pointer; height:15px; width:15px; display:block; background:url(img/pause.png) no-repeat 0 0; float:left; }
#bannerNav span.play { background-image:url(./img/play.png) }

HTML如下

<div id="bannerRotator">
<ul>
  <li>
      <img src="./images/bannerImage1.jpg" alt="bannerImage1">
    </a>
  </li>
  <li>
      <img src="./images/Newbury.jpg" alt="bannerImage2">
    </a
  ></li>
  <li>
      <img src="./images/bannerImage3.jpg" alt="bannerImage3">
    </a
  ></li>
  <li>
      <img src="./images/bannerImage4.jpg" alt="bannerImage4">
    </a
  ></li>
  <li>
      <img src="./images/bannerImage5.jpg" alt="bannerImage5">
    </a
  ></li>         
</ul>
  </div>
4

0 回答 0