实现步骤
1.在容器中引入图片(小图片)
2.设置图片大小 按照总图片大小以及间隔来设置容器大小
3.将图片和容器脱离文档流
4.插入向左向右控制的div
5.将所有图片和div设置悬浮效果
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电商放大镜案例</title>
<script src="../jquery.js"></script>
<style>
// 设置基本样式
.product-container {
width: 450px;
border: 1px solid lightgray;
position: relative;
margin-bottom: 20px;
}
.product-container .product {
width: 450px;
display: block;
}
.product-container .product:hover {
cursor: move;
}
.product-container .search {
width: 30px;
height: 30px;
background-image: url("imgs/__sprite.png");
background-repeat: no-report;
background-position: 0 -24px;
position: absolute;
right: 0;
bottom: 0;
}
.list-container {
width: 452px;
overflow: hidden;
}
.list-container .img-container {
width: 380px;
float: left;
overflow: hidden;
margin: 0 14px;
}
.list-container .img-list {
width: 456px;
overflow: hidden;
}
.list-container .img-list img {
width: 58px;
display: block;
float: left;
margin: 0 9px;
}
.list-container .img-list img:hover {
cursor: pointer;
}
#prev-button {
float: left;
width: 22px;
height: 32px;
background-image: url("imgs/__sprite.png");
background-repeat: no-repeat;
background-position: 0 -54px;
float: left;
margin: 13px 0;
}
.list-container #next-button {
float: left;
width: 22px;
height: 32px;
background-image: url("imgs/__sprite.png");
background-repeat: no-repeat;
background-position: -78px 0;
float: left;
margin: 13px 0;
}
</style>
</head>
<body>
<!--商品展示容器-->
<div class="container">
<!--商品展示-->
<div class="product-container">
<img class="product" src="imgs/a_middle.jpg">
<div class="search"></div>
</div>
<!--商品列表-->
<!-- 可视窗口 -->
<div class="list-container">
<!-- 左右切换按钮 -->
<div id="prev-button"></div>
<!-- 真正的可视窗口 -->
<div class="img-container">
<!-- 图片列表 -->
<div class="img-list">
<img src="imgs/a_small.jpg">
<img src="imgs/b_small.jpg">
<img src="imgs/c_small.jpg">
<img src="imgs/d_small.jpg">
<img src="imgs/e_small.jpg">
<img src="imgs/f_small.jpg">
</div>
</div>
<!-- 左右切换按钮 -->
<div id="next-button"></div>
</div>
</div>
<script>
</script>
</body>
</html>
今日金句
有一片天,为你晴;有一朵云,为你飘;有一叶草,为你绿;有一枝花,为你笑;有一弯月,为你走;有一个字,为你留。