<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#left {
width: 300px;
height: 300px;
position: relative;
}
#left img {
width: 300px;
height: 300px;
}
#right {
width: 500px;
height: 500px;
display: none;
position: absolute;
border: 1px solid red;
background: url(./images/big1.jpg);
}
.shadow {
width: 140px;
height: 140px;
position: absolute;
cursor: move;
background: rgba(255, 255, 0, 0.3);
display: none;
}
.side {
width: 300px;
margin: 50px;
border: 1px solid red;
}
.indexes {
display: flex;
justify-content: center;
padding: 5px;
}
.indexes li {
width: 70px;
height: 70px;
}
.indexes li.active {
box-shadow: 0 0 2px red;
}
</style>
</head>
<body>
<div class="side">
<div id="left">
<div class="shadow"></div>
<img src="./images/middle1.jpg" alt="" id='img'>
</div>
<ul class="indexes">
<li class="active">
<img src="./images/small1.jpg" alt="">
</li>
<li>
<img src="./images/small2.jpg" alt="">
</li>
<li>
<img src="./images/small3.jpg" alt="">
</li>
<li>
<img src="./images/small4.jpg" alt="">
</li>
</ul>
</div>
<div id="right"></div>
<script>
//用变量shadow来储存上方class名为shadow的元素
let shadow = document.querySelector('.shadow')
//用变量left来储存上方class名为left的元素
let left = document.querySelector('#left')
//用变量right来储存上方class名为right的元素
let right = document.querySelector('#right')
//给右边盒子设置定位，左边为左侧盒子于浏览器的距离，让他们之间存在一定距离，外边距为10
right.style.left = left.offsetLeft + left.offsetWidth + 10 + 'px'
//同理，上方和左边盒子距离一样，从而对右边盒子完成定位
right.style.top = left.offsetTop + 'px'
//每一种图片都是由小图，中图，大图来构成的
//利用数组对象，在数组中把他们分为3个对象
let imgs = [{
small: 'small1.jpg',
middle: 'middle1.jpg',
large: 'big1.jpg'
},
{
small: 'small2.jpg',
middle: 'middle2.jpg',
large: 'big2.jpg'
},
{
small: 'small3.jpg',
middle: 'middle3.jpg',
large: 'big3.jpg'
},
{
small: 'small4.jpg',
middle: 'middle4.jpg',
large: 'big4.jpg'
}
]
//获取class名为indexes 里面的所有li标签
//放在indexes变量中
let indexes = document.querySelectorAll('.indexes li')
//打印的结果也就是上方所有的li标签
console.log(indexes);
let img = document.querySelector('#img')
//在利用for循环遍历所有的.indexes下面的li标签
for (let i = 0; i < indexes.length; i++) {
//再给indexes循环过程中的每一个li标签绑定一个鼠标移入事件
indexes[i].onmouseenter = function () {
//更换中图 鼠标移入时更换id名为img元素的图片
img.src = './images/' + imgs[i].middle
//更换大图 同时更换大图的背景图片
right.style.backgroundImage = `url(./images/${imgs[i].large})`
//自身添加高亮 再将鼠标移入的那个元素添加高亮，再将原本的高亮去除
document.querySelector('.indexes li.active').classList.remove('active')
//在给li标签设置class名为active
indexes[i].classList.add('active')
}
}
//给左图绑定鼠标移动事件
left.onmousemove = function (e) {
//定义变量offsetx的值等于鼠标位置距离减去盒子距离浏览器的位置
//同理，变量offsety ,这两个得到的位置也就是鼠标在盒子中的准确定位
let offsetX = e.pageX - left.offsetLeft
let offsetY = e.pageY - left.offsetTop
//定义变量接收鼠标在盒子的定位除以左侧盒子自身的宽度得到的百分比
let percent_X = (offsetX / left.offsetWidth) * 100 + '%'
//定义变量接收鼠标在盒子的定位除以左侧盒子自身的高度得到的百分比
let percent_Y = (offsetY / left.offsetHeight) * 100 + '%'
//在给右边盒子设置同等定位的百分比
right.style.backgroundPosition = `${percent_X} ${percent_Y}`
//shadow部分
//定义变量接收shadow的宽度除以它的一半再用上方的鼠标距离盒子的相减
let x = offsetX - shadow.offsetWidth / 2
let y = offsetY - shadow.offsetHeight / 2
// 限制shadow部分区域
//如果得到的值x小于0就让他等于0
//同样y的值小于0就让他等于0
if (x < 0) x = 0
if (y < 0) y = 0
//定义他的上方最大高度和宽度
//最大宽度为左边盒子的宽度减去shadow部分的宽度
let maxLeft = left.offsetWidth - shadow.offsetWidth
let maxTop = left.offsetHeight - shadow.offsetHeight
//如果大于了它的最大宽度就让他等于最大宽度
if (x > maxLeft) x = maxLeft
if (y > maxTop) y = maxTop
//再把上方得到的x，y的值给shadow设置样式
shadow.style.left = x + 'px'
shadow.style.top = y + 'px'
}
//鼠标移入事件
left.onmouseenter = function () {
shadow.style.display = 'block'
right.style.display = 'block'
}
//鼠标移开事件
left.onmouseleave = function () {
shadow.style.display = 'none'
right.style.display = 'none'
}
</script>
