【轮播图】html里的同一句style语句，放到css里结果就不同了。是因为渲染加载顺序不同吗？
<!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的图片，无法进行切换。
浏览器渲染是有优先级的，是因为这个优先级引起的吗，还是其他原因？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
css有优先级，不过你的问题很可能是组件内部用了 element.style.left 这样的判定，css文件里它是取不到的，所以出了问题。取样式的正确姿势是用 window.getComputedStyle，兼容ie使用 https://raw.githubusercontent.com/twolfson/computedStyle/master/lib/computedStyle.js。
这种设计糟糕的组件少用为好。
看不到JS并不能足够的判断问题在哪，建议可以使用codepen之类的在线创建一个问题demo。
另外顺便说一句，你可以通过断点一步一步的看轮播JS的执行过程，从而判断问题出在哪里。