<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美女相册</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.div0 {
width: 1200px;
margin: 200px auto;
text-align: center;
}
.div1 {
margin: 100px auto;
height: 150px;
border: 1px solid #ccc;
position: relative;
}
/* .mv-left,.mv-right{
width: 20px;
height: 30px;
position: absolute;
background-color: red;
top:75px;
margin-top: -15px ;
line-height: 30px;
}*/
.mv-left,
.mv-right {
width: 30px;
height: 40px;
position: absolute;
background-color: rgba(3, 3, 3, .4);
bottom: 50%;
margin-bottom: -20px;
line-height: 40px;
font-size: 20px;
color: #fff;
text-align: center;
cursor: pointer;
}
.mv-left {
left: 0;
margin-left: -50px;
}
.mv-right {
right: 0;
margin-right: -50px;
}
.li1,
.li2 {
list-style: none;
border-width: 0 1px;
border-style: solid;
border-color: #ccc;
}
.li1 {
float: left;
margin-right: 49px;
}
.li2 {
float: right;
}
.img1 {
width: 198px;
height: 148px;
cursor: pointer;
}
.mv-img {
top: -13%;
left: 50%;
margin-left: -120px;
/*margin-top:*/
position: absolute;
}
.img2 {
width: 240px;
height: 190px;
border: 3px solid skyblue;
}
.div2 {
background-color: #ccc;
text-align: center;
line-height: 800px;
margin: auto;
margin-top: 100px;
width: 1200px;
height: 800px;
}
.img3 {
width: 1200px;
height: 800px;
}
</style>
</head>
<body>
<div class="div0">
<h1>美女相册</h1>
<div class="div1">
<ul>
<li class="li1"><img src="images/1.jpg" alt="" class="img1"></li>
<li class="li1"><img src="images/2.jpg" alt="" class="img1"></li>
<li class="li1"><img src="images/3.jpg" alt="" class="img1"></li>
<li class="li1"><img src="images/4.jpg" alt="" class="img1"></li>
<li class="li2"><img src="images/5.jpg" alt="" class="img1"></li>
</ul>
<div class="mv-img">
<img src="images/3.jpg" alt="" class="img2">
</div>
<div class="mv-left"><</div>
<div class="mv-right">></div>
</div>
<div class="div2"><img src="images/3.jpg" alt="" class="img3">显示图片
</div>
</div>
<script type="text/javascript">
function my$(cls) {
return document.getElementsByClassName(cls);
}
function regImg() {
var getName = my$("div1")[0].getElementsByClassName("img1");
var getImg2 = my$("mv-img");
getName[0].onclick = function() {
getImg2[0].getElementsByClassName("img2")[0].src = this.src;
getImg2[0].style.left = "9%";
document.getElementsByClassName("img3")[0].src = this.src;
return false;
};
getName[1].onclick = function() {
getImg2[0].getElementsByClassName("img2")[0].src = this.src;
getImg2[0].style.left = "29%";
document.getElementsByClassName("img3")[0].src = this.src;
return false;
};
getName[2].onclick = function() {
getImg2[0].getElementsByClassName("img2")[0].src = this.src;
getImg2[0].style.left = "50%";
document.getElementsByClassName("img3")[0].src = this.src;
return false;
};
getName[3].onclick = function() {
getImg2[0].getElementsByClassName("img2")[0].src = this.src;
getImg2[0].style.left = "70%";
document.getElementsByClassName("img3")[0].src = this.src;
return false;
};
getName[4].onclick = function() {
getImg2[0].getElementsByClassName("img2")[0].src = this.src;
getImg2[0].style.left = "90%";
document.getElementsByClassName("img3")[0].src = this.src;
return false;
};
}
function strFormat(x) {
if (x > 12) {
return x % 12;
} else if (x < 1) {
return 12 - (-x % 12);
} else {
return x;
}
}
function setPosition() {
var getName = my$("div1")[0].getElementsByClassName("img1");
var getImg2 = my$("mv-img");
var getImg3 = my$("img3");
if (getImg2[0].style.left == "9%") {
getImg2[0].getElementsByClassName("img2")[0].src = getName[0].src;
getImg3[0].src = getName[0].src
} else if (getImg2[0].style.left == "29%") {
getImg2[0].getElementsByClassName("img2")[0].src = getName[1].src;
getImg3[0].src = getName[1].src
} else if (getImg2[0].style.left == "50%") {
getImg2[0].getElementsByClassName("img2")[0].src = getName[2].src;
getImg3[0].src = getName[2].src
} else if (getImg2[0].style.left == "70%") {
getImg2[0].getElementsByClassName("img2")[0].src = getName[3].src;
getImg3[0].src = getName[3].src
} else if (getImg2[0].style.left == "90%") {
getImg2[0].getElementsByClassName("img2")[0].src = getName[4].src;
getImg3[0].src = getName[4].src
}
}
function mvImg() {
var getName = my$("div1")[0].getElementsByClassName("img1");
var getImg2 = my$("mv-img");
var mvleft = my$("mv-left");
var mvright = my$("mv-right");
mvleft[0].onclick = function() {
//点击左边框，
for (var i = 0; i < getName.length; i++) {
var str1 = getName[i].src.slice(0, 1 + getName[i].src.lastIndexOf("/"));
var str2 = Number(getName[i].src.slice(1 + getName[i].src.lastIndexOf("/"), getName[i].src.lastIndexOf("."))) + 1;
console.log(str2);
var str3 = str1 + strFormat(str2) + '.jpg';
getName[i].src = str3;
console.log(str3);
}
//
setPosition();
};
mvright[0].onclick = function() {
for (var i = 0; i < getName.length; i++) {
var str1 = getName[i].src.slice(0, 1 + getName[i].src.lastIndexOf("/"));
var str2 = Number(getName[i].src.slice(1 + getName[i].src.lastIndexOf("/"), getName[i].src.lastIndexOf("."))) - 1;
var str3 = str1 + strFormat(str2) + '.jpg';
getName[i].src = str3;
console.log(str3);
}
setPosition();
};
}
regImg();
mvImg();
// for(var i=0;i<getName.length;i++){
// getName[i].onclick = function(event){
// for(var j=0;j<getName.length;j++)
// getImg2[0].src = this.href;
// getImg2[0].style.left ="10%";
// x=event.target;
// setImg3();
// console.log(getName);
// }
// }
</script>
</body>
</html>