开发者社区> 问答> 正文

【轮播图】html里的同一句style语句,放到css里结果就不同了。是因为渲染加载顺序不同吗

杨冬芳 2016-06-03 18:00:06 845
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>焦点轮播图</title>
    <link rel="stylesheet" href="../css/style0.css">
    <script src="../js/js0.js"></script>
</head>
<body>
<div id="container">
      <!-- <div id="list" style="left: -1345px;" > -->
      <div id="list"  >
        <img src="../slidePic/slideShow05.jpg"  width:100px; height:100px; alt="1"/>
        <img src="../slidePic/slideShow01.jpg" width:100px; height:100px;alt="1"/>
        <img src="../slidePic/slideShow02.jpg" width:100px; height:100px;alt="2"/>
        <img src="../slidePic/slideShow03.jpg" width:100px; height:100px;alt="3"/>
        <img src="../slidePic/slideShow04.jpg" width:100px; height:100px;alt="4"/>
        <img src="../slidePic/slideShow05.jpg"width:100px; height:100px; alt="5"/>
        <img src="../slidePic/slideShow01.jpg" width:100px; height:100px; alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
</div>

</body>
</html>
 *{ 
     margin: 0;
      padding: 0;
      text-decoration: none;
 }
 container {
      width: 1345px; 
      height: 600px;
       overflow: hidden; 
    position: relative;
}
 list { 
     width: 9415px; 
     height: 600px; 
     position: absolute; 
     z-index: 1;
     left: -1345px;
 }
  list img { 
      float: left;
    width:1345px;
}

html里用注释的那句话才能够实现图片轮播,若把html的 style=“left:-1345px; 去掉,

在css文件中#list的样式里添加,轮播的图片一直显示为slideShow01的图片,无法进行切换。

浏览器渲染是有优先级的,是因为这个优先级引起的吗,还是其他原因

前端开发 JavaScript 容器
分享到
取消 提交回答
全部回答(1)

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程