【轮播图】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的图片，无法进行切换。
浏览器渲染是有优先级的，是因为这个优先级引起的吗，还是其他原因？
展开
收起
1
条回答
写回答
写回答
-
IT从业css有优先级，不过你的问题很可能是组件内部用了 element.style.left 这样的判定，css文件里它是取不到的，所以出了问题。取样式的正确姿势是用 window.getComputedStyle，兼容ie使用 https://raw.githubusercontent.com/twolfson/computedStyle/master/lib/computedStyle.js。
这种设计糟糕的组件少用为好。
2019-07-17 19:42:37赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
