本人结合之前所学一起写了，多个特效，只是新手自己瞎鼓捣的，思路清晰，具体实现的货物放大镜等，替换当中的img地址就可以查看特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>卖娃娃</title>
<style>
#big{width:420px;height:300px;border: 1px solid #999;}
#fdj{width:100px;height: 100px;border:1px solid red;position: absolute;background:blue;opacity:0.2;display: none;}
#big img{display:none;}
#small{width:420px;height:40px;}
.bt{float:left;width:80px;height:40px;border:1px solid red;margin-left:2px;text-align:center;line-height:40px;font-size: 20px;}
#bbig{width:400px;height:400px;position:absolute;top:8px;left:440px;overflow: hidden;display: none;}
#bbig img{display:none;}
</style>
</head>
<body>
<div id="big">
<div id="fdj"></div>
<img src="./img/1.jpg" width='420px' height="300px" style="display:block;">
<img src="./img/2.jpg" width='420px' height="300px">
<img src="./img/3.jpg" width='420px' height="300px">
<img src="./img/4.jpg" width='420px' height="300px">
<img src="./img/5.jpg" width='420px' height="300px">
</div>
<div id="small">
<div class="bt" style="background:lightgreen;">性感</div>
<div class="bt" >诱惑</div>
<div class="bt" >纯洁</div>
<div class="bt" >妖艳</div>
<div class="bt" >可爱</div>
</div>
<div id="bbig">
<img src="./img/1.jpg" style="display:block;" width="1260" height="900">
<img src="./img/2.jpg" width="1220" height="900">
<img src="./img/3.jpg" width="1220" height="900">
<img src="./img/4.jpg" width="1220" height="900">
<img src="./img/5.jpg" width="1220" height="900">
</div>
</body>
<script>
//获取图片
var imgs = document.getElementById('big').getElementsByTagName('img');
//获取图片下的div
var divs = document.getElementById('small').getElementsByTagName('div');
//获取放大的图片
var bimgs = document.getElementById('bbig').getElementsByTagName('img');
//获取放大镜的图片
var bbig = document.getElementById('bbig');
//定义初始值
var m = 1;
//鼠标放进下面的标题停止，离开开始
for(var i=0;i<divs.length;i++){
(function(i){
divs[i].onmouseover=function(){
cImg(i);
cDiv(i);
cBbig(i);
clearInterval(timer);
m=i+1;
}
divs[i].onmouseout=function(){
timer = setInterval(run,2000);
}
})(i);
}
//定时播放
var timer = setInterval(run,2000);
//定义播放的函数
function run(){
if(m>4){
m = 0;
}
cImg(m);
cDiv(m);
cBbig(m);
m++;
}
//图片轮放
function cImg(n){
for(var i=0;i<imgs.length;i++){
imgs[i].style.display = "none";
}
imgs[n].style.display = "block";
}
//标题轮放
function cDiv(n){
for(var i=0;i<divs.length;i++){
divs[i].style.background = "none";
}
divs[n].style.background = "lightgreen";
}
//放大的图轮放
function cBbig(n){
for(var i=0;i<bimgs.length;i++){
bimgs[i].style.display = "none";
}
bimgs[n].style.display = "block";
}
//鼠标移进去停止,出来继续轮放
big.onmouseover = function(){
fdj.style.display = "block";
bbig.style.display = "block";
clearInterval(timer);
}
big.onmouseout = function(){
fdj.style.display = "none";
bbig.style.display = "none";
timer = setInterval(run,2000);
}
/* 放大镜 */
big.onmousemove=function(e){
var e = e || window.event;
this.style.cursor="move";
var fx = e.clientX - big.offsetLeft;
var fy = e.clientY - big.offsetTop;
document.title = fx+":"+fy;
fdj.style.left = (fx-42)+"px";
fdj.style.top = (fy-42)+"px";
//判断光标位置决定放大镜的位置,不出边框
if(fx<50){
fdj.style.left = 8+"px";
}
if(fx>370){
fdj.style.left = 328+"px";
}
if(fy<50){
fdj.style.top = 8+"px";
}
if(fy>250){
fdj.style.top = 208+"px";
}
var bigfx = parseInt(fdj.style.left);
var bigfy = parseInt(fdj.style.top);
console.log(bigfy);
console.log(bigfx);
//放大镜里显示的东西按倍数
bbig.scrollTop = (bigfy-8)*3;
bbig.scrollLeft = (bigfx-8)*3;
// bbig.style.display = 'block';
console.log('--------');
console.log(bbig.scrollTop);
console.log(bbig.scrollLeft);
// console.log(fdj.style.top);
}
</script>
</html>