HTML5期末大作业
文章目录
HTML5期末大作业一、作品展示二、文件目录三、代码实现四、获取更多源码一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link type="text/css" rel="stylesheet" href="css/style.css"><link rel="stylesheet" type="text/css" href="css/menu.css"><title>Document</title></head><body><!-- 顶部 --><header><div><img src="images/channelLogo_go_2.png"><a href="" class="huanqiu">环球网</a><a href="register.html" class="sign">注册</a><a href="login.html" class="login">登录</a></div></header><!-- 导航栏 --><div class="mod"><div class="main22"><ul><li><a class="shouye" href="index.html">首页</a></li><li><a href="出游.html">出游</a></li><li><a href="">环游号</a></li><li><a href="旅游视觉.html">旅游视觉</a></li><li><a href="爱这城.html">爱这城</a></li><li><a href="特色小镇.html">特色小镇</a></li><li><a href="传统村落.html">传统村落</a></li><li><a href="攻略.html">攻略</a></li><li><a href="房车.html">房车</a></li></ul><div class="nav_mid_right"><form action="" method="post"><input type="text" class="search_text" /></form></div></div></div><div class="cover"><div id="julvSlideshow"><ul id="showUl"><li><img src="images/cover_05.jpg"></li><li><img src="images/cover_01.png"></li><li><img src="images/cover_02.jpg"></li><li><img src="images/cover_03.jpg"></li><li><img src="images/cover_04.jpg"></li><li><img src="images/cover_05.jpg"></li></ul> <div id="arrow1"><</div><div id="arrow2">></div> <ul id="showUllist"><li><a class="active" href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul></div></div><script>//轮播图效果var num = 0;function G(id){return document.getElementById(id)}arrA = G("showUllist").getElementsByTagName('a')G("arrow2").onclick = function(){if(num<3){num = num + 1;}else{num = 0;}console.log(num)var ml = num * -1000 + "px";G("showUl").style.marginLeft = ml;for(var i = 0;i < arrA.length;i++){arrA[i].style.backgroundColor = "#1270d8";}arrA[num].style.backgroundColor = "red";}G("arrow1").onclick = function(){if(num>0){num = num - 1;}else{num = 3;}console.log(num);var ml1 = num * -1000 + "px";G("showUl").style.marginLeft = ml1;for(var i = 0;i < arrA.length;i++){arrA[i].style.backgroundColor = "#1270d8";}arrA[num].style.backgroundColor = "red";}for(var i = 0;i < arrA.length;i++){arrA[i].index = i;arrA[i].onclick = function(){var ind = this.index;num = ind;var ml3 = num * -1000 + "px";G("showUl").style.marginLeft = ml3;<img class="img" src="/it/u=3293615275,3501984461&fm=76"><div class="heikuang">测试你多重人格</div></div><div class="content"><img class="img"src="/huitu/v.B1A1DD43AC5ECEF35C2B09471EEF45E6?enc=gbk&img=http%3A%2F%%2Fdsp-image%%2Fit%2Fu%3D759311479%2C3852178776%26fm%3D76&tpl=sbb%2Fhuitu%2F2734_0.zip&second=%C9%CF%F1%AB%A3%A1%B8%F9%B1%BE%CD%A3%B2%BB%CF%C2%C0%B4%A3%A1&_rz=700x394&first=%B2%E9%BF%B4%CF%EA%C7%E9"><div class="heikuang">灭神</div></div><div class="content"><img class="img" src="/it/u=2793385842,2693122789&fm=76"><div class="heikuang">Phthon招聘</div></div><div class="content"><img class="img" src="/it/u=163794735,436622&fm=76"><div class="heikuang">民宿短租</div></div><div class="content"><img class="img" src="/it/u=656305057,3808546603&fm=76"><div class="heikuang">一套vi设计</div></div><div class="content"><img class="img" src="/it/u=4223602408,1477843916&fm=76"><div class="heikuang">办公室装修</div></div><div class="content"><img class="img" src="/it/u=1825496240,415754158&fm=76"><div class="heikuang">网站建设</div></div></div></div></div><IFRAME width=100% SRC="底部.html" scrolling="no" frameborder="no"></IFRAME></body></html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识
学生网站模板：旅游出行网站设计——旅游网设计(15页) HTML+CSS+JavaScript 学生DW网页设计作业成品 学生旅游网站模板
