1.首先进行布局
<div class="box">
<div class="middle">
<img src="./image/68d0ac29ce4a326d (1).jpg" alt="#">
</div>
<div class="small">
<span class="leftbtn"><</span>
<span class="rightbtn">></span>
<div class="centersmall">
<div class="imgbox">
<div class="smallimg imgborder" data-middle = "68d0ac29ce4a326d (1).jpg" data-big = "68d0ac29ce4a326d (2).jpg">
<img src="./image/68d0ac29ce4a326d.jpg" alt="">
</div>
<div class="imgmar smallimg" data-middle = "68d0ac29ce4a326d (1).jpg" data-big = "68d0ac29ce4a326d (2).jpg">
<img src="./image/c2686c0274e6ad43.jpg" alt="">
</div>
<div class="imgmar smallimg" data-middle = "f6f419ff198375d7 (1).jpg" data-big = "f6f419ff198375d7 (2).jpg">
<img src="./image/f6f419ff198375d7.jpg" alt="">
</div>
<div class="imgmar smallimg" data-middle = "f7f7f95090f913f9 (1).jpg" data-big = "f7f7f95090f913f9 (2).jpg">
<img src="./image/f7f7f95090f913f9.jpg" alt="">
</div>
<div class="smallimg imgmar" data-middle = "f7f7f95090f913f9 (1).jpg" data-big = "f7f7f95090f913f9 (2).jpg">
<img src="./image/40a5449b7770747c.jpg" alt="">
</div>
<div class="smallimg imgborder imgmar" data-middle = "68d0ac29ce4a326d (1).jpg" data-big = "68d0ac29ce4a326d (2).jpg">
<img src="./image/68d0ac29ce4a326d.jpg" alt="">
</div>
<div class=" smallimg imgmar" data-middle = "68d0ac29ce4a326d (1).jpg" data-big = "68d0ac29ce4a326d (2).jpg">
<img src="./image/c2686c0274e6ad43.jpg" alt="">
</div>
<div class=" smallimg" data-middle = "f6f419ff198375d7 (1).jpg" data-big = "f6f419ff198375d7 (2).jpg">
<img src="./image/f6f419ff198375d7.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="bigbox">
</div>
</div>
2.css样式
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 450px;
height: 560px;
border: 1px solid #000;
}
.middle {
position: relative;
width: 450px;
height: 450px;
cursor: move;
}
.small {
position: relative;
overflow: hidden;
width: 450px;
height: 90px ;
}
.centersmall {
overflow: hidden;
width: 400px;
height: 90px;
margin: 10px auto;
}
.imgbox {
width: 620px;
height: 70px;
font-size: 0;
transition: all .6s linear;
}
.imgbox div {
position: relative;
display: inline-block;
width: 70px;
height: 70px;
box-shadow: 0 0 2px #000;
vertical-align: center;
}
.imgbox div img {
width: 70px;
height: 70px;
}
.imgborder {
box-shadow: 0 0 2px red !important;
}
.imgborder:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
border-width: 10px;
border-style: solid;
border-color: transparent red red transparent;
}
.imgmar {
margin: 5px;
}
.leftbtn ,.rightbtn {
position: absolute;
top: 10px;
display: block;
z-index: 2;
width: 12px;
height: 70px;
color: red;
font-size: 12px;
background:rgba(196, 196, 196, .6);
line-height: 70px;
text-align: center;
opacity: 0;
transition: all .5s linear;
cursor: pointer;
}
.leftbtn {
left: 0;
}
.rightbtn {
right: 0;
}
.small:hover .leftbtn,.small:hover .rightbtn{
opacity: 1;
}
.middle img {
width: 100%;
height: 100%;
}
.bigbox {
position: absolute;
top: -1px;
left: 450px;
width: 700px;
height: 700px;
border: 1px solid #000;
background: url(./image/68d0ac29ce4a326d\ \(2\).jpg) no-repeat ;
background-position: left top;
display: none;
}
.ceng {
position: absolute;
left: 0;
top: 0;
background: url(./image/1593846277.png) rgba(120, 120, 120, 0.1);
background-size: 5px 5px;
}
3.js代码
<script>
/*
1.鼠标进入middle中出现悬停层
2.离开middle 移除ceng
*/
var middle = document.getElementsByClassName("middle");
var bigbox = document.getElementsByClassName("bigbox");
var smallimg = document.getElementsByClassName("smallimg");
var ceng = null;
var wid = null;
var defaultele = smallimg[0];
var bili = 800/350;
middle[0].onmouseenter = function(){
//创建
ceng = document.createElement("div")
ceng.className = "ceng";
//计算成的宽高
wid = 500/(800/350);
ceng.style.width = wid+"px";
ceng.style.height = wid+"px";
this.appendChild(ceng);
//显示最大容器
bigbox[0].style.display = "block";
}
middle[0].onmouseleave = function(){
ceng.remove();
//隐藏最大容器
bigbox[0].style.display = "none";
}
middle[0].onmousemove =function(e){
var pageX = e.clientX|| e.pageX;
var pageY = e.clientY|| e.pageY;
//下面是使用三元运算符,限制层的移动区域
pageX = pageX-wid/2<0?0:pageX-wid/2>=450-wid?450-wid:pageX-wid/2;
pageY = pageY-wid/2<0?0:pageY-wid/2>=450-wid?450-wid:pageX-wid/2;
ceng.style.left = pageX+"px";
ceng.style.top = pageY+"px";
//bigbox里面的背景图也跟着移动
bigbox[0].style.backgroundPosition =-pageX*bili+ "0px "+(-pageY*bili)+"0px";//如果使用的复合属性 中间的空格别忘了
}
//写小图的点击
for(var i = 0;i <smallimg.length;i++){
smallimg[i].onclick = function(){
//修改当前元素的框颜色
//让当前的变颜色之前,先去掉之前的颜色
defaultele.classList.remove("imgborder")
this.classList.add("imgborder");
//再次记录当前变色的
defaultele = this;
//点击小图对应的中图和大图得切换
var middleSrc = this.getAttribute("data-middle");
//修改中图的图片路径
middle[0].children[0].src = "./image/"+middleSrc;
//修改大图属性
var bigSrc = this.getAttribute("data-big");
bigbox[0]. style.backgroundImage = "url('./image/"+bigSrc+"')";
}
}
//点击左右箭头
leftbtn[0].onclick = function (){
imgbox[0].style.transform = "translatex(-220px)"
}
rightbtn[0].onclick = function (){
imgbox[0].style.transform = "translatex(0px)"
}
</script>