<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="work.css">
<script type="text/javascript" src='tool.js'></script>
<script type="text/javascript" src='index2.js'></script>
<title></title>
</head>
<body>
<div id='one'>
<ul class='nav'>
<li><a href="#">首页</a></li>
<li><a href="#">介绍</a></li>
<li><a href="message.html">留言</a></li>
<li><a href="#">如何防范</a></li>
</ul>
</div>
<div id='two'>
<ul id='imglist'>
<li><img src='2.jpg'></li>
<li><img src='1.jpg'></li>
<li><img src='3.jpg'></li>
<li><img src='4.jpg'></li>
</ul>
<div id='navdiv'>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<div id='three'>
<h3>新型冠状病毒肺炎</h3>
<p>       新型冠状病毒肺炎（Corona Virus Disease 2019，COVID-19），简称“新冠肺炎”，世界卫生组织命名为“2019冠状病毒病” [1-2] ，是指2019新型冠状病毒感染导致的肺炎。2019年12月以来，湖北省武汉市部分医院陆续发现了多例有华南海鲜市场暴露史的不明原因肺炎病例，证实为2019新型冠状病毒感染引起的急性呼吸道传染病。</p>
<p>       截至欧洲中部时间2022年6月21日18时37分（北京时间22日零时37分），世卫组织网站最新数据显示，全球确诊病例较前一日增加307400例，达到537591764例；死亡病例增加759例，达到6319395例。</p>
<p>       2020年2月11日，世界卫生组织总干事谭德塞在瑞士日内瓦宣布，将新型冠状病毒感染的肺炎命名为“COVID-19” [7] 。2月22日，国家卫生健康委发布通知，“新型冠状病毒肺炎”英文名称修订为“COVID-19” [8] 。3月11日，世卫组织认为当前新冠肺炎疫情可被称为全球大流行 [9] 。4月4日，中国举行全国性哀悼活动 [10] 。8月18日，国家卫健委修订完成了新型冠状病毒肺炎诊疗方案（试行第八版） [11] 。9月3日，世卫组织新冠肺炎疫情应对评估专家组共同主席在成员国吹风会上宣布了专家组成员名单，钟南山入选。</p>
<p>       截至6月21日24时，据31个省（自治区、直辖市）和新疆生产建设兵团报告，现有确诊病例762例（其中重症病例6例），累计治愈出院病例219361例，累计死亡病例5226例，累计报告确诊病例225349例，无现有疑似病例。累计追踪到密切接触者4225026人，尚在医学观察的密切接触者106326人。</p>
</div>
<div id='four'>
<button id='button01'>点击按钮图片移动</button>
<img src='7.jpg' width="300px" height="300px">
</div>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
body{
background-image: url("10.jpg");
}
#one{
width: 900px;
height: 40px;
position: relative;
/* background-color: aqua; */
margin: 0 auto;
}
#two{
height:435px;
width: 1044px;
/* background-color:yellow; */
margin: 50px auto;
position: relative;
top: 10px;
padding:10px 0;
overflow: hidden;
}
#imglist{
list-style: none;
/* width: 5000px; */
position: absolute;
/* left: -900px; */
}
#navdiv a{
float: left;
width: 15px;
height: 15px;
background-color: white;
margin: 0 5px;
/* opacity: 0.5 */
}
#navdiv{
position: absolute;
bottom: 15px;
left: 500px;
}
#imglist li{
float: left;
margin:0 10px;
}
.nav li{
width: 220px;
line-height: 40px;
text-align: center;
float: left;
list-style: none;
font-size: 30px;
/* border-style: solid;
border-width: 1px; */
}
.nav a{
display: block;
color: blue;
text-align: center;
padding: 10px 16px;
text-decoration:none;
}
.nav li a:hover {
color: red;
}
#three{
width: 700px;
height: 400x;
background-color: bisque;
float: left;
}
#four{
width: 700px;
height: 400px;
/* background-color: yellow; */
float: left;
position: relative;
/* relative占位置 */
/* 父相子绝 */
}
#four img{
position: absolute;
top: 30px;
left: 20px;
/* absolute不占位置 */
}
#button01{
left: 20px;
position: absolute;
}
JS
window.οnlοad=function(){
var imglist=document.getElementById('imglist');
var imgArr=imglist.getElementsByTagName('img');
imglist.style.width=1044*imgArr.length+'px';
var two=document.getElementById('two');
var navdiv=document.getElementById('navdiv')
var index=0;
var alla=navdiv.querySelectorAll('a');//获取过去后就是一个数组，因为有很多个a
alla[index].style.backgroundColor='black';
for(var i=0;i<alla.length;i++){
alla[i].num=i;
alla[i].οnclick=function(){
clearInterval(timer);
index = this.num;
// imglist.style.left=-1043*index+'px';
setA();
move(imglist,"left",-1044*index,10,function(){
autochange();
});
};
}
autochange();
function setA(){
if(index>=imgArr.length - 1){
index=0;
imglist.style.left=0;
}
for(var i=0;i<alla.length;i++){
alla[i].style.backgroundColor="";
}
alla[index].style.backgroundColor='black';
}
function autochange(){
timer=setInterval(function(){
index++;
index %= imgArr.length;
move(imglist,'left',-1044*index,20,function(){
setA();//回调的是seta
});
},3000);
}
var four=document.getElementById("four");
var button=document.getElementById("button01");
var img=four.querySelector("img");
button.οnclick=function () {
img.style.left=100+'px';
}
};
JS实现动画效果
function move(obj,attr,target,speed,callback){
clearInterval(obj.timer);
var current=parseInt(getStyle(obj,attr));
if(current>target){
speed=-speed;
}
obj.timer=setInterval(function(){
var oldvalue=parseInt(getStyle(obj,attr));
var newvalue=oldvalue+speed;
if((speed<0 && newvalue<target)||(speed>0 && newvalue>target)){
newvalue=target;
}
obj.style[attr]=newvalue+'px';
if(newvalue==target){
clearInterval(obj.timer);
callback && callback();
}
},30);
}
function getStyle(obj,name){
return getComputedStyle(obj,null)[name];
}