给每一个页面的li的宽度不是应该等于容器宽度吗？
//设置每一个页面li的宽度
$.each(slides, function(index) {
var slide = slides.eq(index); //获取到每一个li元素
slides.css({
width: width+'px',
height: height+'px'
});
})
为什么li宽度要等于ul宽度呢？= =代码错了吧？
arlenhui
2015-08-06
5 回答
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<script src="http://img1.sycdn.imooc.com//down/55ac9a860001a6c500000000.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ol,
ul,
li {
list-style-type: none;
}
/*主体部分*/
#content {
width : 60%;
height : 60%;
top : 20%;
left : 20%;
overflow : hidden;
position : absolute;
border : 1px solid #ccc;
}
.content-wrap {
position: relative;
}
.content-wrap > li {
width: 100%;
height: 100%;
background: #CAE1FF;
color: red;
float: left;
overflow: hidden;
position: relative;
}
li:nth-child(2) {
background: #9BCD9B;
}
li:nth-child(3) {
background: yellow;
}
</style>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<!-- 第一副画面 -->
<li> 页面1 </li>
<!-- 第二副画面 -->
<li> 页面2 </li>
<!-- 第三副画面 -->
<li> 页面3 </li>
</ul>
</div>
<script type="text/javascript">
var container = $("#content");
//获取第一个子节点
var element = container.find(":first")
//li页面数量
var slides = element.find("li")
//获取容器尺寸
function change(){
var width = container.width();
var height = container.height();
//设置li页面总宽度
element.css({
width : (slides.length * width) + 'px',
height : height + 'px'
})
//设置每一个页面li的宽度
$.each(slides, function(index) {
var slide = slides.eq(index); //获取到每一个li元素
slides.css({
width: width+'px',
height: height+'px'
});
})
}
change();
window.onresize = function(){
change();
}
</script>
</body>
</html>
举报
0/150
提交
取消
