html5 css js轮播图动画

来源：互联网发布：王者荣耀输入法软件编辑：程序博客网时间：2024/06/05 10:48

<!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 onmouseover="changePic(1);" onmouseout="back();"> </span>
<span onmouseover="changePic(2);" onmouseout="back();"> </span>
<span onmouseover="changePic(3);" onmouseout="back();"> </span>
<span onmouseover="changePic(4);" onmouseout="back();"> </span>
<span onmouseover="changePic(5);" onmouseout="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>

阅读全文

1 0