<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人主页</title>
<style type="text/css">
* {
margin:0px;
padding:0px:
}
#title {
font-family: "华文行楷";
font-size: 35px;
color: #FFF;
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
width: 1000px;
margin-right: auto;
margin-left: auto;
}
#title h1 span {
font-size:larger;
}
body{
background:#01A9BC;
}
#xxl ul {
text-decoration: none;
float: left;
}
#xxl ul li {
color: #FFF;
text-decoration: none;
float: left;
list-style-type: none;
font-size: 25px;
font-weight: bolder;
text-align: center;
padding-left: 110px;
margin-right: auto;
margin-left: auto;
}
a {
text-decoration: none;
color:#FFF;
}
#xxl {
text-align: center;
width: 1200px;
margin-right: auto;
margin-left: auto;
}
#body {
background-color: #FFF;
width: 1200px;
height: 1500px;
margin-top: 80px;
margin-right: auto;
margin-left: auto;
}
.all{
width: 1000px;
height: 500px;
padding: 7px;
border: 1px solid #ccc;
position: relative;
margin-top: 100px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
}
#body #introduce #intr-left {
float: left;
height: 350px;
width: 254px;
margin-left:100px;
}
#body #experience #intr-right {
float: right;
height: 350px;
width: 254px;
margin-right:100px;
}
#body #introduce #intr-right {
color: #01A9BC;
margin-bottom: 15px;
margin-left: 254px;
width:746px;
text-align:center;
font-size:25px;
}
#body #experience #intr-left {
color: #01A9BC;
margin-bottom: 15px;
margin-right: 254px;
width:746px;
text-align:center;
font-size:25px;
}
.screen{
width:1000px;
height:500px;
overflow:hidden;
position:relative;
}
.screen li{
width: 1000px;
height: 500px;
overflow: hidden;
float: left;
}
.screen ul{
position: absolute;
width: 5000px;
margin-top: 0px;
margin-left: 0px;
}
.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}
.all ol li{ float:left; width:20px; height:20px; background:#0FF; margin-left:10px; cursor:pointer;}
#introduce {
text-align: left;
width: 5000px;
height: 500px;
margin-top:30px;
}
.all ol li.current{ background:#9FF;}
/*#arr {display: none;}*/
#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%;
margin-top:-20px; background:#0FF; cursor:pointer; line-height:40px;
text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px;
color:#fff; opacity:0.3; border:1px solid #fff;}
#arr #right{right:5px; left:auto;}/*left:auto可以使元素自动靠右显示*/
/*#arr #left{left:5px; right:auto;}*/
h2 {
font-family: "微软雅黑";
font-weight: bold;
color: #01A9BC;
text-align: center;
font-size: 30px;
}
#text {
margin-top: 10px;
margin-right: auto;
margin-left: auto;
margin-bottom:20px;
}
#body #introduce #intr-r-dw ul li {
color: #01A9BC;
list-style-type: none;
margin-top: 30px;
margin-left: 450px;
font-size:20px;
}
#body #introduce #intr-r-dw {
width:1000px;
}
#body #experience #intr-l-dw {
width: 700px;
text-align: left;
margin-right: 450px;
}
#body #experience #intr-l-dw ul li {
color: #01A9BC;
list-style-type: none;
font-size: 20px;
margin-top: 30px;
width: 700px;
}
</style>
<div align="center" id="title"><h1><span>xxx</span>的<span>个人</span>网站</h1></div>
<div id="xxl">
<ul>
<li><a href="3drotate.html">我的相册</a></li>
<li><a href="hobby.html">爱好</a></li>
<li><a href="motherland.html">我的家乡</a></li>
<li><a href="work.html">我的作品</a></li>
<li><a href="talk to me.html">留言板</a></li>
</ul>
</div>
<div id="body">
<div class="all" id="all">
<div class="screen" id="screen">
<ul id="ul">
<li><img src="images/bp1.jpg" width="1000" height="500" /></li>
<li><img src="images/bp2.jpg" width="1000" height="500" /></li>
<li><img src="images/bp3.jpg" width="1000" height="500" /></li>
<li><img src="images/bp4.jpg" width="1000" height="500" /></li>
<li><img src="images/bp5.jpg" width="1000" height="500" /></li>
</ul>
<ol></ol>
<div id="arr"><span id="left"><</span><span id="right">></span></div><!--制作<、>翻页按钮-->
</div>
</div>
<div id="text"><h2>个 人 简 介 & 学 习 经 历<h2>
</div>
<div id="introduce" align="left">
<div id="intr-left"><img src="images/2.jpg" width="254" height="350"></div>
<div id="intr-right"><h3>简 介</h3></div>
<div id="intr-r-dw"><ul>
<li>姓名：***</li>
<li>出生日期：00.00.00</li>
<li>爱好：****</li>
<li>特长：****</li>
<li>最喜欢的话：*** **** ***</li>
</ul>
</div>
</div>
<div id="experience" align="right">
<div id="intr-right"><img src="images/7.jpg" width="254" height="350"></div>
<div id="intr-left"><h3>学 习 经 历</h3></div>
<div id="intr-l-dw"><ul>
<li>高中：***</li>
<li>大学：****</li>
<li>计算机设计类学习经历：****</li>
<li>计算机编程学习经历：***</li>
<li>计算机硬件学习经历：****</li>
</ul>
</div>
</div>
</div>
<div align="center" style="color:#FFF">©***@qq.com
版权所有.</div>
</body>
</html>
<script>
//需求：无缝轮播图
//步骤：
//1.老三步。获取相关元素。
//2.补齐相互盒子
//1.复制第一张图片所在的li，填入所在的ul中。
//2.生成相关的ol中的li。
//3.点亮第一个ol中的li。
//3.鼠标放到小方块儿上，轮播图片。
//4.添加定时器。
//5.左右切换的按钮。
//1.老三步。获取相关元素。
var box = document.getElementById("all");
var ul = box.children[0].children[0];
var ol = box.children[0].children[1];
var ulLiArr = ul.children;
//2.补齐相互盒子
//1.复制第一张图片所在的li，填入所在的ul中。
var newLi = ulLiArr[0].cloneNode(true);
ul.appendChild(newLi);
//2.生成相关的ol中的li。
for(var i=0;i<ulLiArr.length-1;i++){
var newOlLi = document.createElement("li");
newOlLi.innerHTML = i+1;
ol.appendChild(newOlLi);
}
//3.点亮第一个ol中的li。
var olLiArr = ol.children;
ol.children[0].className = "current";
//3.鼠标放到小方块儿上，轮播图片。
for(var i=0;i<olLiArr.length;i++){
olLiArr[i].index = i;
olLiArr[i].onmouseover = function () {
for(var j=0;j<olLiArr.length;j++){
olLiArr[j].className = "";
}
olLiArr[this.index].className = "current";
animate(ul,-this.index*ul.children[0].offsetWidth);
key = square = this.index;
}
}
//4.添加定时器。
var timer = null;
var key = 0;
var square = 0;
timer = setInterval(autoPlay,1000);//开始轮播，每秒换一张图
function autoPlay(){
key++;
square++;
if(key>olLiArr.length){
key=1;
ul.style.left = 0;
}
animate(ul,-key*ul.children[0].offsetWidth);
square = square>olLiArr.length-1?0:square;
for(var j=0;j<olLiArr.length;j++){
olLiArr[j].className = "";
}
olLiArr[square].className = "current";
}
//5.鼠标移开开启定时器，鼠标放上去开启定时器。
box.onmouseover = function () {
clearInterval(timer);
}
box.onmouseout = function () {
timer = setInterval
静态网站.zip html+css 动态轮播图 跑马灯效果 div+frame容器
需积分: 0 134 浏览量
2024-03-03
15:07:39
上传
评论
收藏 8.17MB ZIP 举报
静态网站.zip （62个子文件） 
ml-top.html 552B palace.html 3KB banquan.html 317B talk to me.html 2KB human.html 4KB work.html 2KB 3drotate.html 3KB ml-left.html 1KB ml-right.html 523B geography.html 2KB motherland.html 537B index.html 9KB history.html 3KB ml-bottom.html 391B
images 
work8.jpg 34KB like4.jpg 67KB work14.jpg 61KB work6.jpg 197KB work17.jpg 66KB work7.jpg 197KB work5.jpg 182KB like1.jpg 49KB bp4.jpg 68KB bp3.jpg 68KB 2.jpg 201KB like2.jpg 30KB 10.jpg 568KB 77.jpg 89KB like9.jpg 271KB work16.jpg 33KB work13.jpg 94KB 6.jpg 720KB bp5.jpg 43KB 1.jpg 459KB work3.jpg 31KB like10.jpg 154KB work10.jpg 157KB work18.jpg 85KB like5.jpg 53KB home1.jpg 159KB like3.jpg 60KB work12.jpg 44KB like7.jpg 72KB bj.jpg 17KB work4.jpg 53KB 5.jpg 346KB bp1.jpg 106KB 8.jpg 1.04MB work2.jpg 70KB 11.jpg 95KB like8.jpg 79KB work11.jpg 280KB work1.jpg 17KB work15.jpg 72KB 3.jpg 131KB 7.jpg 608KB work9.jpg 36KB bp2.jpg 174KB like6.jpg 27KB 9.jpg 287KB 4.jpg 674KB hobby.html 3KB资源评论
