版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第五章习题与实践使用列表标签完成腾讯首页中视觉焦点部分的布局，如图5-33所示，具体要求如下：图5-33腾讯网视觉焦点样图从网站上获取相关的图片和文字使用div+css技术实现，层的布局和样式分离编写JavaScript代码，实现当单击右侧的圆形箭头图片时，显示下一组图片和文字编写JavaScript代码，实现两组图片每3秒钟自动切换一次答案：参加第5章源码网页源码：<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>视觉焦点</title>
<linktype="text/css"rel="stylesheet"href="css/focus.css"></link>
<scriptlanguage="JavaScript"src="js/focus.js"></script>
</head>
<body>
<divclass="layout">
<divclass="title">
<aclass="txt"href="/ch/photo/"target="_blank">视觉焦点</a>
</div>
<divclass="mainbody">
<divid="picDirection">
<ahref="javascript:;"class="previcon"></a>
<ahref="javascript:;"class="nexticon"></a>
</div>
<divclass="wrapul"id="wrapu1">
<ulid="picUl1"class="ul1">
<liclass="item">
<ahref="/omn/20200425/20200425A0E47Q00.html"class="p1t"target="_blank">
<imgsrc="images/8.png"alt="他37天跨3国穿40城为患癌父亲圆梦：父与子在笑容里告别"style="display:inline;">
<p>他37天跨3国穿40城为患癌父亲圆梦：父与子在笑容里告别</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A09AZT00.html"class="p1t"target="_blank">
<imgsrc="images/9.png"alt="他考上高中却被拒入学，无奈拄双拐修家电，23年后让人刮目相看"style="display:inline;">
<p>他考上高中却被拒入学，无奈拄双拐修家电，23年后让人刮目相看</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A053QT00.html"class="p1t"target="_blank">
<imgsrc="images/10.png"style="display:inline;">
<p>河南7旬老人每天走村串巷送服务被村民称作科技大蓬车</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A066PT00.html"class="p1t"target="_blank">
<imgsrc="images/11.png"alt="湖南永州：抗洪抢险演练备战汛期"style="display:inline;">
<p>湖南永州：抗洪抢险演练备战汛期</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200427/20200427A08H9F00.html"class="p1t"target="_blank">
<imgsrc="images/12.png"alt="揭秘机场内飞禽猛兽叫声真相：实拍机场驱鸟员与鸟“斗智斗勇”"style="display:inline;">
<p>揭秘机场内飞禽猛兽叫声真相：实拍机场驱鸟员与鸟“斗智斗勇”</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A0L8HK00.html#p=1"class="p1t"target="_blank">
<imgsrc="images/13.jpg"alt="这些杯子和瓶子不是做出来的，而是直接种出来的">
<p>这些杯子和瓶子不是做出来的，而是直接种出来的</p>
</a>
</li>
</ul>
<ulid="picUl2"class="ul2">
<liclass="item">
<ahref="/omn/20200428/20200428A09AZT00.html#p=1"class="p1t"target="_blank">
<imgsrc="images/0.jpg"alt="他考上高中却被拒入学，无奈拄双拐修家电，23年后让人刮目相看"style="display:inline;">
<p>他考上高中却被拒入学，无奈拄双拐修家电，23年后让人刮目相看</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A09AZT00.html"class="p1t"target="_blank">
<imgsrc="images/1.jpg"alt="山东这座县级市，因一个人影响中国几千年历史，如今却十分低调"style="display:inline;">
<p>山东这座县级市，因一个人影响中国几千年历史，如今却十分低调</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A053QT00.html#p=1"class="p1t"target="_blank">
<imgsrc="images/2.jpg"alt="河南7旬老人每天走村串巷送服务被村民称作科技大蓬车">
<p>河南7旬老人每天走村串巷送服务被村民称作科技大蓬车</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200427/20200427A044LM00.html#p=1"class="p1t"target="_blank">
<imgsrc="images/3.jpg"alt="拼完是一块破碎的玻璃：透明的拼图，你敢挑战吗？"style="display:inline;">
<p>拼完是一块破碎的玻璃：透明的拼图，你敢挑战吗？</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200408/20200408A0U37600.html#p=1"class="p1t"target="_blank">
<imgsrc="images/4.jpg"alt="十五的月亮十六圆，“超级月亮”来了，看看啥样子"style="display:inline;">
<p>十五的月亮十六圆，“超级月亮”来了，看看啥样子</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200419/20200419A06GCX00.html"class="p1t"target="_blank">
<imgsrc="images/5.jpg"alt="湖北武汉：吉庆街渐渐恢复活力">
<p>湖北武汉：吉庆街渐渐恢复活力</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>JavaScript代码：window.onload=function(){
//手动轮播
//获取按钮
varnext=document.getElementsByClassName("next")[0];
varprev=document.getElementsByClassName("prev")[0];
//获取UL
varpic_div1=document.getElementsByClassName("ul1")[0];
varpic_div2=document.getElementsByClassName("ul2")[0];
//添加鼠标单击事件
next.onclick=function(){
if(timer){
clearInterval(timer);//清除定时器
}
pic_div1.style.display="none";
pic_div2.style.display="block";
prev.style.display="block";
next.style.display="none";
}
prev.onclick=function(){
if(timer){
clearInterval(timer);//清除定时器
}
pic_div1.style.display="block";
pic_div2.style.display="none";
prev.style.display="none";
next.style.display="block";
}
//自动轮播
varcurrent_index=0;
//3000表示调用周期，以毫秒为单位，
vartimer=window.setInterval(autoChange,10000);
//鼠标移出事件
next.onmouseout=function(){
//启动定时器，回复自动切换
timer=setInterval(autoChange,10000);
}
prev.onmouseout=function(){
//启动定时器，回复自动切换
timer=setInterval(autoChange,10000);
}
}
functionautoChange(){
//自增索引
++current_index;
//当索引自增达到上限时，索引归0
if(current_index==2){
current_index=0;
}
if(0==current_index)
{
/*pic_div1.style.display="block";
pic_div2.style.display="none";*/
prev.style.display="none";
next.style.display="block";
}
if(1==current_index){
/*pic_div1.style.display="none";
pic_div2.style.display="block";*/
prev.style.display="block";
next.style.display="none";
}
}CSS代码：body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{
margin:0;
padding:0
}
img{
border:0;
vertical-align:top
}
li{
list-style:none;
}
a{
color:#333;
text-decoration:none
}
a:hover{
color:#0c82ff;
}
.layout{
width:1320px;
height:250px;
margin:20pxauto;
}
.layout.title{
border-bottom:1pxsolid#C9DFF4;
}
.layout.title.txt{
font-size:16px;
line-height:28px;
color:#1479d7;
border-bottom:6pxsolid#0276DA;
}
.p1timg{
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
width:194px;
height:120px
}
.p1tp{
margin-top:10px;
font-size:14
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年度物流行业协议书格式字体规范合同
- 2025年度智能音响知识产权许可与市场推广合同
- 2025年度特种车辆司机招聘与专业操作合同
- 二零二五年度交通事故赔偿处理与车辆维修保养及事故理赔合同
- 专项资金的借贷合同7篇
- 2技术开发合同7篇
- 房地产项目材料供应合同版
- 无子女夫妻离婚合同范本
- 度水利工程环境监理合同模板
- 2025年亚洲代理合作合同
- 2024年普通高等学校招生全国统一考试·新课标卷（生物）附试卷分析
- 优化热处理工艺的机器学习
- 2024年1月时政热点题库及答案
- 2023年山东省夏季普通高中学业水平合格考试会考生物试题及参考答案
- 非正常接发列车作业标准
- 体育室内课-体育大富翁
- 2024年国家保安员资格考试题库及参考答案（完整版）
- DL-T692-2018电力行业紧急救护技术规范
- 消防员训练伤的预防及恢复课件
- 医院感染防控基本知识2
- 泌尿外科专业英语词汇 总结
评论
0/150
提交评论