代码编织梦想

主要实现:

1、放大镜效果。

2、点击小图出现中图的效果。

3、实现小图左右切换的效果。

4、实现图片上下切换的效果。

5、实现购物车数量增加减少的效果。

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入css样式-->
    <link rel="stylesheet" href="./css/detail.css">
    <!--引入字体图标大于小于号图标-->
    <link rel="stylesheet" href="./css2/iconfont.css">
</head>
<body>
    <div class="wrap">
        <div class="product-intro">
            <div class="preview-wrap">
                <div class="main-img">
                    
                    <a class="img" href="javascript:;"><img src="./images/a1.jpg"></a>
                    <div class="zoom-pup"></div>
                    <div class="zoom-div">
                        <img src="images/a1.jpg">
                       
                    </div>
                    
                </div>
                <div class="spec-list">
                    <a class="prev" href="javascript:;"></a>
                    <a class="next" href="javascript:;"></a>
                    
                    <div class="spec-items">
                        <ul>
                            <li class="img-hover">
                                <img src="./images/a1.jpg">
                            </li>
                            <li>
                                <img src="./images/a2.avif">
                            </li>
                            <li>
                                <img src="./images/a3.avif">
                            </li>
                            <li>
                                <img src="./images/a4.avif">
                            </li>
                            <li>
                                <img src="./images/a5.avif">
                            </li>
                            <li>
                                <img src="./images/a6.avif">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="intemInfo-wrap">
                <div class="blank">
                    <div class="sku-name">
                        <img src="images/h.png">
                        高闪海贼王手办路飞18cm模型索隆艾斯罗山治公仔全套动漫生日礼物摆件火拳路飞/高约
                    </div>
                    <div class="news">
                      <h6>五月大促,每满99减10,福利享不停,冲刺爆量,提前购<a href="javascript:;">查看></a></h6>
                    </div>
                    <div class="summary">
                        <div class="summary-price">
                            <p>京东价 &nbsp;&nbsp;&nbsp;&nbsp;  <span>¥ 109.00</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:;'>降价通知</a></p>
                        </div>
                        <div class="summary-promotion">
                            <div class="dt">促销</div>
                            <div class="dt-1">
                                <div class="prom-one">
                                    <p><span class="span1">跨店铺满减</span>&nbsp;&nbsp;&nbsp;每满99,可减10元现金</p>
                                </div>
                                <div class="prom-two">
                                    <p><span class="span1">满减</span>&nbsp;&nbsp;&nbsp;&nbsp;满20元减5元,满50元减5元,满100元减15元  <a href='javascript:;'>详情>></a></p>
                                </div>
                                <div class="prom-three">
                                    <p>"满减""跨店铺满减"仅可任选其一,可在购物车更改</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="summary-one">
                        <div class="dl">配送至</div>
                        <div class="dl-1">
                            <div class="sum-one">
                            <select>
                                <option>甘肃</option>
                                <option>四川</option>
                                <option>江苏</option>
                                <option>陕西</option>
                                <option>江西</option>
                                <option>山东</option>
                            </select>
                            <select>
                                <option>兰州市</option>
                                <option>广安市</option>
                                <option>自贡市</option>
                                <option>常州市</option>
                                <option>苏州市</option>
                                <option>宝鸡市</option>
                                <option>榆林市</option>
                                <option>萍乡市</option>
                                <option>新余市</option>
                                <option>日照市</option>
                                <option>滨州市</option>
                            </select>
                        </div>
                        <div class="sum-two">
                            <p>支持&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;">可配送全球&nbsp;|&nbsp;特权保障&nbsp;|&nbsp;退换货运费险&nbsp;|&nbsp;急速审核</a>&nbsp;&nbsp;&nbsp;在线支付免运费</p>
                        </div>
                        <div class="sum-three">
                            <p>由&nbsp;&nbsp;<span class="span3">高闪玩具旗舰店</span>&nbsp;&nbsp;发货,并提供售后服务,现在下单,5月10日发货,预计5月13日送达</p>
                        </div>
                            
                        </div>
                        <hr color="#ccc">
                        
                    </div>
                    <div class="goods">
                        <div class="dh">选择型号</div>
                        <div class="grid-container">
                            <div class="grid-items">
                                <a href="javascript:;">
                                    <img src="images/a1.jpg">
                                    <span class="span4">火拳路飞/高约15cm</span>
                                </a>
                            </div>
                            <div class="grid-items">
                                <a href="javascript:;">
                                    <img src="images/a2.avif">
                                    <span class="span4">火拳艾斯/高约13cm</span>
                                </a>
                                    
                                
                            </div>
                            <div class="grid-items">
                                <a href="javascript:;">
                                    <img src="images/a3.avif">
                                    <span class="span4">黑足山治/高约17cm</span>
                                </a>
                            </div>
                            <div class="grid-items">
                                <a href="javascript:;">
                                    <img src="images/a4.avif">
                                    <span class="span4">爱笑/高约28cm</span>
                                </a>
                            </div>
                            <div class="grid-items">
                                <a href="a5.avif">
                                    <img src="images/a5.avif">
                                    <span class="span4">站姿艾斯/高约27cm</span>
                                </a>
                            </div>
                            <div class="grid-items">
                                <a href="javascript:;">
                                    <img src="images/a6.avif">
                                    <span class="span4">三千世界索隆/高约19cm</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chose-amount">
                    <input type="text" class="buy-num" value="1" placeholder="1">
                    <a href="javascript:;" class="reduce disabled">-</a>
                    <a href="javascript:;"  class="add">+</a>
                </div>
            </div>
            </div>
            <div class="track">
                
               
               <div class="track-items">
                <ul>
                    <li  class="img-flow">
                        <img src="images/h1.avif">
                    </li>
                    <li>
                        <img src="images/h2.avif"> 
                    </li>
                    <li>
                        <img src="images/h3.avif">
                    </li>
                    <li>
                        <img src="images/h4.avif">
                    </li>
                    <li>
                        <img src="images/h5.avif">
                    </li>
                    <li>
                        <img src="images/h6.avif">
                    </li>
                </ul>
            </div>
            <div class="button">
                <a class="shang" href="javascript:;"><span class="iconfont">&#xe612;</span></a>
               <a class="xia"  href="javascript:;"><span class="iconfont">&#xe507;</span></a>
            </div>
            </div>
        
    </div>
    





    <script src="./js/detail.js"></script>
</body>
</html>

css文件

.wrap{
    width:1210px;
   margin:0 auto;
}
.product-intro{
    width:1210px;
    margin-top:10px;
    margin-bottom:10px;

}
.preview-wrap{
     width:352px;
     height:500px;
     /* background-color: aqua; */
     padding-bottom:15px;
     float:left;

}
.intemInfo-wrap{
     width:590px;
     height:800px;
     /* background-color: cadetblue; */
     margin-left:30px;
     margin-right:24px;
     float:left;
}
.track{
    width:210px;
    height:600px;
    /* background-color:cornflowerblue; */

    float:left;
    

}
.main-img{
    width:350px;
    height:350px;
    border:1px solid black;
    margin-bottom:20px;
    position:relative;
  
}
.spec-list{
    width:352px;
    height:54px;
    margin-bottom:18px;
    /* background-color: bisque; */
    position: relative;
   
}
.prev,.next{
    position:absolute;
    top:50%;
    width:22px;
    height:32px;
    margin-top:-16px;
    cursor: pointer;
    text-decoration: none;
    
    background:url('../images/__sprite.png')
    no-repeat;

}

.prev{
    left:0;
    background-position: 0 -54px;

}
.next{
    right:0;
    background-position:-78px 0 ;
}
.spec-items{
    position: relative;
    width:290px;
    height:54px;
    margin:0 auto;
 
    overflow:hidden;
    

}
 .spec-items ul{
    width:406px;
    height:54px;
    position:absolute;
    top:-18px;
    left:-38px;
    transition:all 0.5s  ;
   
 }
.spec-items ul li{
    width:54px;
    height:54px;
    margin:0 2px;
    float:left;
    list-style-type: none;
}
.spec-items ul li img{
    width:50px;
    height:50px;
    margin:2px;
    border:2px solid #fff;
}
/* .spec-items ul li img:hover{
    border:2px solid red;
} */
.spec-items ul .img-hover img{
    border:2px solid #e53e41;
}
.zoom-pup{
    width:236px;
    height:236px;
    background-color:gold ;
    opacity: 0.5;
    position:absolute;
    top:0;
    left:0;
    display:none;
}
.zoom-div{
   width:540px;
   height:540px;
   position:absolute;
   top:0;
   left:351px;
   overflow: hidden;
   background-color: darkkhaki; 
   display:none;
   
}
.zoom-div img{
    position:absolute;
    top:0;
    left:0;
    height:800px;
    width:800px;
    z-index:10;
}
.blank{
    width:100%;
    height:500px;
    
}
.sku-name{
    width:570px;
    height:30px;
    
    padding:10px;
    

}
.news{
    width:570px;
    height:18px;
    margin:10px;
    
}
h6{
    color:brown;
}
.summary{
    width:570px;
    height:107px;
    padding-bottom: 5px;
    background-color:#f1f1f1;
    
}
.summary-price{
    width:570px;
    height:22px;
    margin:10px;
    padding-bottom:5px;
}
p{
    color:#999;
    font-size:13px;
}
p span{
    color: #e53e41;
    font-size:25px;
}
p a{
    color:rgb(8, 114, 146);
    text-decoration: none;
}
p a:hover{
    color:#e53e41;
}
.summary-promotion{
    width:570px;
    height:91px;
    padding-bottom:5px;
    

}
.dt{
    width:48px;
    height:30px;
    padding-left:10px;
    line-height:10px;
    color:#999;
    font-size:13px;
}
.dt-1{
    width:520px;
    height:91px;
    margin-left:70px;
    margin-top:-40px;
    
}
.prom-one{
    width:430px;
    height:15px;
    line-height:15px;
    font-size:12px;
    
}

.prom-two{
    width:430px;
    height:15px;
    line-height:15px;
    font-size:12px;
}
.prom-three{
    width:430px;
    height:15px;
    line-height:15px;
    font-size:12px;
}
.prom-three p{
    color:#666;
}
.span1{
    border:2px solid  #e53e41;
    font-size:12px;
}
.summary-one{
    width:570px;
    height:100px;
    /* background-color:aqua; */
}
.chose-amount{
    width:58px;
    height:44px;
    border:1px solid #ccc;
    margin-right:10px;
    /* background-color: burlywood; */
    position:relative;
}
.dl{
    width:50px;
    height:30px;
    line-height:30px;
    color:#999;
    font-size:12px;
    margin:10px;
}
.dl-1{
    width:520px;
    height:91px;
    margin-left:70px;
    margin-top:-34px;
    /* background-color:aquamarine; */
}
.sum-one{
    width:430px;
    height:15px;
    line-height:15px;
    font-size:12px;
    color:#999;
}
.span3{
    font-size:12px;
}
.goods{
    width:570px;
    height:160px;
    /* background-color:aqua; */
   
}
.dh{
    width:50px;
    height:30px;
    line-height:30px;
    color:#999;
    font-size:12px;
    margin:10px;
}
.grid-container{
    width:520px;
    height:150px;
    margin-left:70px;
    margin-top:-34px;
    /* background-color:burlywood; */
    display:grid;
    Grid-template-rows:1.5fr 1.5fr ;
    Grid-template-columns:1fr 1fr 1fr;
}
.grid-items{
    width:134px;
    height:43px;
    background-color:#f7f7f7;
    float:left;
    color:#fff;
    margin-top:5px;
    margin-right:7px;
    margin-bottom:4px;
    position:relative;
    border:2px solid #666;
}
.grid-items a{
    text-decoration: none;
    font-size:13px;
    color:#999;
  
}
.grid-items:hover{
    border:2px solid #e53e41;
}
.span4{
   position:absolute;
   top:12px;
   left:43px;

}

.grid-items img{
    width:40px;
    height:43px;
}

.buy-num{
    width:43px;
    height:42px;
    padding:1px 2px;
    line-height:42px;
    position:absolute;
    top:1px;
    left:0;
    border:0;
    text-align:center;
}
.reduce,.add{
    width:15px;
    height:22px;
    border:1px solid #ccc;
    color:#666;
    line-height:22px;
    text-align:center;
    background-color:#f1f1f1;
    position:absolute;
    text-decoration: none;

}
.reduce{
    right:-1px;
    bottom:-1px;
}
.add{
    top:-1px;
    right:-1px;
    

}
.disabled{
    color:#ccc;
    cursor:not-allowed;/*不允许点击*/
}
.track-items{
    width:210px;
    height:500px;
    position:relative;
    margin:0 auto;
    overflow:hidden;
}

 .track-items ul{
    width:210px;
    height:700px;
    position:absolute;
    top:0;
    left:0;
    transition:all 0.5s  ;
   
 }
.track-items ul li{
    width:150px;
    height:150px;
    margin:0 2px;
    
    list-style-type: none;
}
.track-items ul li img{
    width:140px;
    height:140px;
    margin:2px;
    border:2px solid #fff;
}

.track-items ul .img-flow img{
    border:2px solid #e53e41;
}
.button{
    width:210px;
    height:100px;
    position:relative;
}
.button a{
    
    color:#666;
}
.shang,.xia{
    position:absolute;
    top:50px;
    width:22px;
    height:32px;
    /* margin-top:-16px; */
    cursor: pointer;
    text-decoration: none;    
}
.shang{
    left:70px;
}
.xia{
    right:70px;
}

js文件

//实现前进和后退小图片的效果=====
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');
let ul=document.querySelector('.spec-items ul');

prev.onclick=function(){
    ul.style.left='-38px';
    prev.style.background='url(images/disabled-prev.png)';//以html文件为准
    
}
next.onclick=function(){
    ul.style.left='-154px';
    next.style.background='url(images/disabled-next.png)';
}
/**
 * 可以有过渡效果:
 * 1、数值类的
 * 2、颜色类的
 * 3、转换:平移、旋转、缩放、倾斜
 * 盒子阴影
 */
//实现鼠标放在小图上,边框变红并且上面显示小图
let lis=document.querySelectorAll('.spec-items ul li');
let img=document.querySelector('.main-img  img');
let imgs=document.querySelectorAll('.spec-items img');
for(let i=0;i<lis.length;i++){
    lis[i].onmouseover=function(){
        for(let j=0;j<lis.length;j++){
            lis[j].className='null';
        }
        lis[i].className='img-hover';
        //两种表达:
       // 1、img.src=lis[i].children[0].src;
       //2、img.src=imgs[i].src;
       img.src=imgs[i].src;
    }
}
//实现鼠标滑入显示放大镜和大图的效果
 let mainImg=document.querySelector('.main-img');//获取中图
 let zoomPup=document.querySelector('.zoom-pup');//获取放大镜,中图上面的小黄块
 let zoomDiv=document.querySelector('.zoom-div');//获取大图的div
 let bigImg=document.querySelector('.zoom-div img')//获取大图
 mainImg.onmouseover=function(){
      zoomPup.style.display='block';
      zoomDiv.style.display='block';
 }
 //实现鼠标滑出隐藏放大镜和大图的效果
 mainImg.onmouseout=function(){
    zoomPup.style.display='none';
    zoomDiv.style.display='none';
 }


 //给中图绑定鼠标移动事件
 mainImg.onmousemove=function(e){
 //获取鼠标距离文档顶部(body)的距离pageX
   let pageY=e.pageY;
   //获取中图距离文档顶部(body)的距离  offsetTop
   let offsetTop=mainImg.offsetTop;
   //获取黄色小块的高度的一半
   let h=zoomPup.clientHeight / 2;
   //获取黄色小块顶部距离中图顶部的距离
   let top=pageY-offsetTop-h;
   //判断top
   if(top<=0){
    top=0;
   }else if(top>=mainImg.clientHeight-zoomPup.clientHeight){
     top=mainImg.clientHeight-zoomPup.clientHeight;
   }
   //将放大镜的定位top设置为黄色小块顶部距离中图顶部的距离。
   zoomPup.style.top=top+'px';
   //获取鼠标距离文档左边(body)的距离 pageX
   let pageX=e.pageX;
   //获取中图距离文档左边(body)的距离
   let offsetLeft=mainImg.offsetLeft;
   //获取黄色小块宽度的一半
   let w=zoomPup.clientWidth / 2;
   //获取黄色小块距离中图左边的距离
   let left=pageX-offsetLeft-w;
   //判断left
   if(left<=0){
    left=0;
   }else if(left>=mainImg.clientWidth-zoomPup.clientWidth){
    left=mainImg.clientWidth-zoomPup.clientWidth;
   }
   //将放大镜的定位left设置为黄色小块顶部距离中图顶部的距离。
   zoomPup.style.left=left+'px';
   
   
   let y=top/(mainImg.clientHeight-zoomPup.clientHeight);
   let  yy=y*(800-540);
   bigImg.style.top=-yy+'px';//让大图向上走yy的距离
   let x=left/(mainImg.clientWidth-zoomPup.clientWidth);
   let xx=x*(800-540);
   bigImg.style.left=-xx+'px';//让大图向左走xx的距离


 }
 //实现购物车数量的改变
 let reduce=document.querySelector('.reduce');
 let add=document.querySelector('.add');
 let buyNum=document.querySelector('.buy-num');

add.onclick=function(){
    buyNum.value++;
    if(buyNum.value>1){
        reduce.className='reduce';
    }
}
reduce.onclick=function(){
    if(buyNum.value>1){
        buyNum.value--;
    }else if(buyNum.value<=1){
        buyNum.value=1;
        reduce.className='reduce disabled';
    }
}
//实现右边的图上下移动的效果
let shang=document.querySelector('.shang');
let xia=document.querySelector('.xia');
let ul1=document.querySelector('.track-items ul');
shang.onclick=function(){
    ul1.style.top='-369px';

}
xia.onclick=function(){
    ul1.style.top='0px';
}
let lis1=document.querySelectorAll('.track-items ul li');
for(let i=0;i<lis.length;i++){
    lis1[i].onmouseover=function(){
        for(let j=0;j<lis1.length;j++){
            lis1[j].className='null';
        }
        lis1[i].className='img-flow';
    
    }
}

截图如下:

详情页:

点击小图出现中图的效果图:

放大镜效果:

实现小图左右切换的效果:

 

 

 

 

实现购物车数量增加减少的效果:

 

实现图片上下切换的效果: 

 

 

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_54800157/article/details/131027388