源码
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="pictureChange.css" />
<script src="pictureChange.js"></script>
<body>
<div id="container">
<div class="control">
<div class="picture">
<img src="pic/img1.jpg" />
<img src="pic/img2.jpg" />
<img src="pic/img3.jpg" />
</div>
</div>
<div class="button">
<img src="pic/img1.jpg" />
<img src="pic/img2.jpg" />
<img src="pic/img3.jpg" />
</div>
</div>
</body>
</html>
CSS部分
*{
padding: 0;
margin: 0;
}
body{
background: #f3f3f3;
}
#container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 400px;
border: 1px solid #55ff00;
padding: 10px;
background: white;
text-align: center;
}
.control{
width: 300px;
height: 300px;
overflow: hidden;
}
.picture{
width: 1000px;
height: 300px;
margin-left: 0;
animation: switch 8s ease-out infinite;
transition-duration: 1s;
}
.picture img{
float: left;
width: 300px;
height: 300px;
max-width: 100%;
max-height: 100%;
}
@keyframes switch{
0%,25%{
margin-left: 0;
}
35%,60%{
margin-left: -300px;
}
70%,95%{
margin-left: -600px;
}
100%{
margin-left: 0;
}
}
.button{
padding-top: 6px;
width: 300px;
height: 95px;
text-align: center;
}
.button img{
display: inline-block;
cursor: pointer;
width: 95px;
height: 95px;
max-width: 100%;
max-height: 100%;
border: 0.5px solid white;
opacity: 0.5;
}
JS部分
window.onload = function(){
var button = document.getElementsByClassName("button");
var btn = button[0].getElementsByTagName("img");
var picture = document.getElementsByClassName("picture");
function reAnimation(){
for(let j = 0;j<btn.length;j++){
btn[j].style.borderColor="white";
btn[j].style.opacity="0.5";
}
picture[0].style.animation = "switch 8s ease-out infinite";
}
for (let i = 0;i<btn.length;i++){
btn[i].onclick = function(){
for(let j = 0;j<btn.length;j++){
btn[j].style.borderColor="white";
btn[j].style.opacity="0.5";
}
btn[i].index = i;
picture[0].style.animation = "none";
picture[0].style.marginLeft = -i*300+"px";
btn[i].style.borderColor = "#000000";
btn[i].style.opacity = "1";
setTimeout(reAnimation,5000);
}
}
}
效果
2806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
