html:<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/lunbotu.css"></head><body><div class ="main" id="main"><!--导航--><div class="nav" id="nav"><div class="nav-row"><a href="#"><span>首页</span></a></div><div class="nav-row"><a href="#"><span>点击看看</span></a></div><div class="nav-row"><a href="#"><span>会自动的</span></a></div><div class="nav-row"><a href="#"><span>我的网站</span></a></div></div><!--图片轮播--><div class="banner" id="banner"><a href="#"><div class="banner-slide slide1 slide-active"></div></a><a href="#"><div class="banner-slide slide2 "></div></a><a href="#"><div class="banner-slide slide3"></div></a><a href="#"><div class="banner-slide slide4 "></div></a></div></div><script src="js/luobotu.js"></script></body></html>css:*{padding:0;margin:0;}body{font-family:Microsoft YaHei;}a:link,a:visited{text-decoration: none}.main{width:1000px height:500px; overflow: hidden; }.nav{width: 1000px; height: 50px; background: #FFF; border:dashed #666; border-bottom: none;} .nav-row{ font-size: 22px; margin:auto auto; width: 250px; height: 50px; text-align: center; float:left; background:#666; line-height:50px;}.banner{width: 1000px; height: 450px; overflow: hidden; position: relative;}.banner-slide{width: 1000px; height: 450px; position: absolute; background-repeat: no-repeat; display:none}.slide-active{display:block;}.slide1{ background-image:url("../img/1.jpg") }.slide2{ background-image:url("../img/3.jpg") }.slide3{ background-image:url("../img/4.jpg") }.slide4{ background-image:url("../img/5.jpg") }javascript://封装一个代替getElementById()的方法function byId(id){ return typeof(id)==="string"?document.getElementById(id):id;}var index=0, timer=null, pics=byId("banner").getElementsByTagName("div"), len=pics.length;function slideImg(){ var main=byId("main")//滑过清楚定时器，离开后继续 main.onmouseover = function(){//滑过清除定时器 } main.onmouseout = function(){//鼠标离开后定时器开始 timer = setInterval(function(){ index++; if(index>=len){index=0 } //切换图片 changeImg(); },1000) } }}//切换图片function changeImg(){ pics[index].style.display = 'block';}}slideImg();
添加回答
举报
0/150
提交
取消