<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的首页</title>
<style type="text/css">
body{background:url(../picture/sun.jpg)}
*{ padding:0; margin:0; list-style:none; border:0;}
.all{width:500px; height:200px; padding:7px;
border:1px solid #ccc; margin:100px auto; position:relative; }
.screen{width:500px;height:200px; overflow:hidden; position:relative; }
.screen li{ width:500px; height:400px; overflow:hidden; float:left;}
.screen ul{ position:absolute; left:0; top:0px; width:3000px;hight:400px;}
.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}
.all ol li{ float:left; width:40px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}
.all ol li.current{ background:yellow;}
#arr {display: none;}
#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; 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;}
</style>
<script>
window.onload = function () {
var screen = document.getElementById("screen");
var ul = screen.children[0];
var ol = screen.children[1];
var div = screen.children[2];
var imgWidth = screen.offsetWidth;
var tempLi = ul.children[0].cloneNode(true);
ul.appendChild(tempLi);
for(var i = 0; i < ul.children.length - 1; i++) {
var newOlLi = document.createElement("li");
newOlLi.innerHTML = i + 1;
ol.appendChild(newOlLi);}
var olLiArr = ol.children;
olLiArr[0].className = "current";
for(var i = 0, len = olLiArr.length; i < len; i++) {
olLiArr[i].index = i;
olLiArr[i].onmouseover = function (ev) {
for(var j = 0; j < len; j++) {
olLiArr[j].className = ""; }
this.className = "current";
key = square = this.index;
animate(ul, -this.index * imgWidth);}}
var key = 0;
var square = 0;
var timer = setInterval(autoPlay, 3000);
screen.onmouseover = function (ev) {
clearInterval(timer);
div.style.display = "block";}
screen.onmouseout = function (ev) {
timer = setInterval(autoPlay, 3000);
div.style.display = "none";}
var divArr = div.children;
divArr[0].onclick = function (ev) {
key--;
if(key < 0) {
ul.style.left = -(ul.children.length-1) * imgWidth + "px"; key = 4; }
animate(ul, -key * imgWidth);
square--;
if(square < 0) {
square = 4;}
for(var k = 0; k < len; k++) {
olLiArr[k].className = "";}
olLiArr[square].className = "current";}
divArr[1].onclick = autoPlay;
function autoPlay() {
key++;
if(key > ul.children.length - 1) {
ul.style.left = 0;
key = 1;}
animate(ul, -key * imgWidth);
square++;
if(square > 4) { square = 0; }
for(var k = 0; k < len; k++) { olLiArr[k].className = ""; } olLiArr[square].className = "current";}
function animate(ele,target){clearInterval(ele.timer); var speed = target>ele.offsetLeft?10:-10;
ele.timer = setInterval(function () {var val = target - ele.offsetLeft; ele.style.left = ele.offsetLeft + speed + "px"; if(Math.abs(val)<Math.abs(speed)){ele.style.left = target + "px"; clearInterval(ele.timer); }},10) }}
</script>
</head>
<h1 align="center">我们生如夏花，灿如朝阳</h1>
<body>
<div class="all" id='all'> <div class="screen" id="screen">
<ul id="ul">
<li><img src="../picture/6.jpg" width="500" height=200px /></li>
<li><img src="../picture/7.png" width="500" height=200px /></li>
<li><img src="../picture/ndky.jpg" width="500" height=200px /></li> <li><img src="../picture/4.jpg" width="500" height=200px/></li>
</ul>
<ol>
<li><a href="../index.html.html">主页</a></li>
<li><a href="#">挚爱</a></li>
<li><a href="#">经历</a></li>
<li><a href="#">偶像</a></li>
</ol>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</div>
</body>
</html>
前端网页.zip （35个子文件） 
training 1 
index.html.html 4KB picture 
sun.jpg 109KB
w.2.jpeg 258KB 2.jpg 49KB ygzx.jpg 25KB z.3.jpeg 205KB Thumbs.db 237KB
wza.gif 325KB 6.jpg 32KB 1.jpg 9KB
zel.mp4 2.75MB 5.jpg 78KB ndky.jpg 20KB z.2.jpeg 179KB w.3.jpeg 147KB w.1.jpeg 230KB logo.jpg 17KB sgzx.jpg 7KB s.1.jpeg 52KB wym.mp4 5.64MB wza.1.jpg 278KB
7.png 89KB 3.jpg 21KB s.2.jpeg 172KB sdp.mp4 1.05MB s.3.jpeg 94KB 4.jpg 43KB z.1.jpeg 208KB wenjian picture sun.jpg 109KB 2.jpg 49KB 6.jpg 32KB 3.jpg 21KB 4.jpg 43KB myouxiang.html 3KB my shouye.html 6KB资源评论
木道寻
- 粉丝: 1338
- 资源: 20
最新资源
- (源码)基于Spring Boot和gRPC的分布式系统.zip
- (源码)基于SSM框架的权限管理系统.zip
- (源码)基于OpenGL的3D模型渲染与交互系统.zip
- (源码)基于JFinal框架的蜗牛调查问卷系统.zip
- (源码)基于Arduino的夜间自动鸡舍门系统（motokurnikator）.zip
- (源码)基于Spring Boot和Thymeleaf的人事管理系统.zip
- (源码)基于C++的Huffman编码压缩解压系统.zip
- (源码)基于Python的智能家居监控与控制系统.zip
- (源码)基于C++的拍子与虚拟环境交互系统.zip
- (源码)基于C++和Boost库的贝叶斯网络学习系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
