<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>七夕主題</title>
<script src="http://img.mukewang.com/down/55ac9a860001a6c500000000.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
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");
var slides = element.find("li");
var width = container.width();
var height = container.height();
element.css({
width : (slides.length * width) + 'px';
height : height + 'px';
});
$.each(slides, function(index) {
var slide = slides.eq(index); //獲取到每一個(gè)li元素
slide.css({
width : width + 'px';
height : height + 'px';
});
});
</script>
</body>
</html>
