<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sundy 日志day11</title>
<style>
#div{
text-align: center;
font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
color: blueviolet;
font-size: 40px;
}
#outer {
width: 651px;
height: 365px;
background: url(Day12-%E5%BE%85%E7%94%A8%E7%A4%BA%E4%BE%8B.html/images/1.jpg) no-repeat;
margin: 100px auto;
border-radius: 40px;
position: relative;
transition: 1s;
}
#inner {
width: 250px;
height: 30px;
position: absolute;
right: 20px;
bottom: 20px;
}
span {
background-color: rgba(200,200,100, 0.5);
width: 30px;
height: 30px;
display: inline-block;
/*行内块,可以设置宽度和高度,且如果可以排开,就在一行*/
border-radius: 15px;
margin-left: 10px;
transition: 1s;
}
span:hover {
cursor: pointer;
background-color: red(255,255,255, 0.5);
transform: scale(1.2);
}
#div1{
background-color: aqua;
border-radius: 20px;
box-shadow:2px 2px 33px #fff;/*设计阴影的*/
font-family: Constantia, Lucida Bright, DejaVu Serif, Georgia, serif;
margin-left: auto;
}
#div2{
margin-top: inherit;
}
</style>
</head>
<body style="background: #056BA3">
<div id="div">
一日学习作业和心得
</div>
<div id="outer">
<div id="inner">
<span οnmοuseοver="changePic(1);" οnmοuseοut="back();"> </span>
<span οnmοuseοver="changePic(2);" οnmοuseοut="back();"> </span>
<span οnmοuseοver="changePic(3);" οnmοuseοut="back();"> </span>
<span οnmοuseοver="changePic(4);" οnmοuseοut="back();"> </span>
<span οnmοuseοver="changePic(5);" οnmοuseοut="back();"> </span>
</div>
</div>
<script>
function changePic(imgNumber) {
document.getElementById("outer").style.backgroundImage = "url(images/" + imgNumber + ".jpg)";
document.getElementById("outer").style.opacity=0.5; //不透明度
//url(images/2.jpg)
}
function back(){
document.getElementById("outer").style.opacity=1;
}
var current=1; //设置当前图片编号
function carousel(){ //轮播
current++;
if(current==6) current=1; //如果到了第5张,加1后变为6,则回到第1张
changePic(current); //改变图片
}
window.setInterval("carousel()",1500); //没个1.5s换一次图片,同时变为半透明
window.setInterval("back()",1600); //每隔1.6s改变为不透明
</script>
<div id="div1">
<h2>读书心得</h2>
<p>读书心得是我们生活中必不少的的程序,书的世界是丰富多彩的,什么都有。</p>
<p>读书让我领悟了人世间的思想和认识,思想:在读书中,我们读的认真,就会感到自己仿佛身临其境</p>
<p>感觉自己是书本里的人物;认识:读书使我们去看世界,了解国内外的事,认识许多有名人物。</p>
<p>所以我们要好好学习,天天向上,让读书丰富我们的知识,开阔我们的视野。</p>
<div id="div2">Sundy
<p>2017.7.25</p></div>
</div>
</body>
</html>