标签：C4JS bg img jpg 学习 var imgs document
任务一：生成图片广告
任务简介
首先，使用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>
标签：C4JS,bg,img,jpg,学习,var,imgs,document 来源： https://blog.csdn.net/weixin_51963604/article/details/117996903
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。