html个人空间制作,html+css+js制作简单网站首页

一个简单的网站主页

主要由html+css+js制作

1.图片展示

这是首页的上半部分，主要内容有：顶部标头、顶部导航栏、图片轮播图。

这是首页的下半部分，主要内容有：首页主要内容、底部。

2.代码展示

index.html

我们的恋爱小屋

window.οnlοad=function(){

var wrap=document.getElementById('wrap'),

pic=document.getElementById('pic').getElementsByTagName("li"),

list=document.getElementById('list').getElementsByTagName('li'),

index=0,

timer=null;

// 定义并调用自动播放函数

timer = setInterval(autoPlay, 2000);

// 鼠标划过整个容器时停止自动播放

wrap.onmouseover = function () {

clearInterval(timer);

}

// 鼠标离开整个容器时继续播放至下一张

wrap.onmouseout = function () {

timer = setInterval(autoPlay, 2000);

}

// 遍历所有数字导航实现划过切换至对应的图片

for (var i = 0; i < list.length; i++) {

list[i].onmouseover = function () {

clearInterval(timer);

index = this.innerText - 1;

changePic(index);

};

};

function autoPlay () {

if (++index >= pic.length) index = 0;

changePic(index);

}

// 定义图片切换函数