任务一：生成图片广告
任务简介
首先，使用HTML+CSS+JavaScript在页面正中生成一幅广告图片
其次，用JavaScript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局
最后，用JavaScript实现广告轮播效果，在页面正中每隔3秒切换不同的广告图片，多张图片轮流显示
实现广告位的居中
下图为实现效果
实现广告位的居中其实也就是，在页面中实现一张图片的居中显示
<html>
<head>
<meta charset="utf-8" />
<title>js程序设计</title>
<style type="text/css">
#bg{
width:500px;
height:380px;
border: 2px solid gray;
overflow:hidden;
/* 页面中居中 */
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin:auto;
}
img{
width:500px;
}
</style>
<script type="text/javascript">
function bgbg(){
// 图片地址
var imgs = "./img/1.jpg";
// 获取div节点对象
var bg = document.getElementById("bg");
// 创建一个新的节点对象
var img = document.createElement('img');
// 将地址赋予
img.src = imgs;
// 添加节点
bg.appendChild(img);
}
</script>
</head>
<body onl oad="bgbg()">
<div id="bg"></div>
</body>
</html>
动态间距
这里就以真实的广告位固定于页面顶部，效果如下
实现动态间距，在于获取页面的宽度，这一步是最重要的，
关键代码： document.body.clientWidth
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js程序设计</title>
<style type="text/css">
#bg{
background-color: beige;
border: 2px solid gray;
overflow:hidden;
/* 广告固定 */
position:fixed;
left: 0;
top: 0;
right: 0;
}
</style>
<script type="text/javascript">
function bgbg(){
// 图片地址
var imgs = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg",
"./img/5.jpg","./img/6.jpg","./img/7.jpg","./img/8.jpg","./img/9.jpg"];
// 获取div节点对象
var bg = document.getElementById("bg");
// 获取页面宽度
var winwidth = document.body.clientWidth
// 计算图片宽度
var imgwidth = winwidth*0.7/imgs.length
// 计算图片间距
var kswidth = winwidth*0.3/(imgs.length+1)
for(var i in imgs){
// 创建一个新的节点对象
var img = document.createElement('img');
// 将地址赋予
img.src = imgs[i];
// 获取css
img.style.width = imgwidth+'px';
img.style.marginLeft = kswidth+'px';;
// 添加子节点
bg.appendChild(img);
}
}
</script>
</head>
<body onl oad="bgbg()">
<div id="bg"></div>
</body>
</html>
图片轮播效果
图片轮播效果，虽然和题目要求不一样，这里采用js做的滚动动画效果
如果想弄成题目的要求只需要修改下参数，将frame里面的代码重修修改下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片轮播</title>
<style type="text/css">
#bg{
background-color: beige;
width:500px;
height:360px;
border: 2px solid gray;
overflow:hidden;
/* 页面中居中 */
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin:auto;
}
img{
position: absolute;
}
</style>
<script type="text/javascript">
function bgbg(){
var sleep = function(time) {
var startTime = new Date().getTime() + parseInt(time, 10);
while(new Date().getTime() < startTime) {}
};
// 图片地址
var imgstr = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg",
"./img/5.jpg","./img/6.jpg","./img/7.jpg","./img/8.jpg","./img/9.jpg"];
// 存储img对象
var imgs = []
// 获取div节点对象
var bg = document.getElementById("bg");
for(var i in imgstr){
// 创建一个新的节点对象
var img = document.createElement('img');
// 将地址赋予
img.src = imgstr[i];
img.style.width = '500px';
// img.style.bottom = '0px';
// 添加节点
bg.appendChild(img);
// 添加对象到数组
imgs.push(img);
}
// 设置索引
var index = imgs.length-1;
// 设置初始位置参数
var pop =0
// 延迟事件，每隔10ms移动一个步长
var id = setInterval(frame,10);
function frame(){
// 步长加一
pop++;
if(pop==500){
pop = 0;
index--;
}else{
imgs[index].style.left = pop + "px";
if(index > 0){
imgs[index-1].style.left = (pop-500) + "px";
}else{
index = imgs.length-1;
imgs[index].style.left = (pop-500) + "px";
}
}
}
}
</script>
</head>
<body onl oad="bgbg()">
<div id="bg">
</div>
</body>
</html>
多级联动菜单
这里采用json格式来实现数据的存储，也可以采用xml,关键时理清逻辑顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多级联动菜单</title>
<style type="text/css">
select{
width: auto;
padding: 0 2%;
margin: 0;
}
option{
text-align:center;
}
</style>
<script type="text/javascript">
function bgbg(){
// 建立数据对象关系
var data={"广东省":{
"广州市":['越秀区','荔湾区','海珠区','天河区','白云区','黄埔区','番禺区','花都区','南沙区','增城区','从化区'],
"深圳市":['福田区','罗湖区','盐田区','南山区','宝安区','龙岗区','龙华区','坪山区','光明区','大鹏新区'],
"珠海市":['香洲区','金湾区','斗门区']
},
"福建省":{
"厦门市":['思明区','湖里区','集美区','海沧区','同安区','翔安区'],
"福州市":['鼓楼区','晋安区','马尾区','台江区','仓山区','长乐区']
},
"四川省":{
"成都市":['武侯区','锦江区','青羊区','金牛区','成华区','龙泉驿区','温江区','新都区','青白江区','双流区','郫都区'],
}
}
// 获取省、市、区对象
var province = document.getElementById('province');
var city = document.getElementById('city');
var district = document.getElementById('district');
// 定义存储省市区对象的空数组
var pros = [];
var cits = [];
var dists = [];
// 加载省
load(pros,province,data);
// 选择省时加载市
province.onchange = function (){
// 删除上一次市级和区级节点对象
removes(cits,city);
removes(dists,district);
// 获取选中的值
var cityval = data[province.value]
// 判断是否选中
if(cityval == null){
return
}
// 加载市
load(cits,city,cityval);
// 选择市时加载区
city.onchange = function(){
// 删除上一次的区对象
removes(dists,district);
var distval = cityval[city.value];
if(distval == null){
return
}
load(dists, district, distval);
}
}
// 封装加载省市区对象的方法
function load(list,parent,datas){
for(var prov in datas){
// 循环创建对象
var Option = document.createElement('option');
parent.appendChild(Option);
//判断是不是数组
if(Array.isArray(datas)){
Option.value = datas[prov];
Option.text = datas[prov];
}else{
Option.value = prov;
Option.text = prov;
}
list.push(Option);
}
}
// 封装删除的方法
function removes(list,parent){
for(var rem in list){
// 删除对象
parent.removeChild(list[rem]);
// 删除数组里的·1对象
delete list[rem];
}
}
}
</script>
</head>
<body onl oad="bgbg()">
<select id='province'>
<option value="provicnce">--省--</option>
</select>
<select id = 'city'>
<option value="city">--市--</option>
</select>
<select id='district'>
<option value="district">--区--</option>
</select>
<br />
</body>
</html>