“零” 插件实现产品详情轮播图，带放大效果。

流口水的兔子
285 阅读3分钟

话不多说直接上代码

先来一张效果图

1672221420642.jpg

第一步 "HTML"部分

第一个是主体大图部分

<div class="large_box">
        <ul>
                <li>
                        <img src="../static/brand/Aristorm/product3.webp" width="600" height="650">
                        <!-- 作用是鼠标浮动上去会有一块区域 -->
                        <div class="imgmask1"></div>
                </li>
                <li>
                        <img src="../static/brand/Aristorm/product3.webp" width="600" height="650">
                        <div class="imgmask1"></div>
                </li>
                <li>
                        <img src="../static/brand/Aristorm/product3.webp" width="600" height="650">
                        <div class="imgmask1"></div>
                </li>
        </ul>
</div>

也就是这里

1672217875545.jpg

第二个就是缩率图部分

<div class="small_box">
        <!-- 上箭头点击事件 -->
        <span class="btns lefts_btn" onclick="left_btn()">
                <!-- i引入的是字体图标，可以用图片，就是一个箭头 -->
                <i class="icon-jiantou_liebiaoshouqi_o iconfont"></i></span>
                <!-- 缩略图列表 -->
        <div class="small_list">
                <ul>
                        <li class="on">
                                <img src="../static/brand/Aristorm/product1.webp" width="60" height="60">
                                <!-- 作用是,当前on下面的mask类是背景加深的，也就是表示，当前是在那张图片 -->
                                <div class="mask"></div>
                        </li>
                        <li class="">
                                <img src="../static/brand/Aristorm/product2.webp" width="60" height="60">
                                <div class="mask"></div>
                        </li>
                        <li class="">
                                <img src="../static/brand/Aristorm/product3.webp" width="60" height="60">
                                <div class="mask"></div>
                        </li>
                </ul>
        </div>
        <!-- 下箭头点击事件 -->
        <span class="btns rights_btn" onclick="right_btn()">
                <i class="icon-jiantou_liebiaozhankai_o iconfont"></i></span>
  </div>

第三个就是放大镜部分了

<div id="box1-1-1">
            <img src="" alt="" id="img1_1">
    </div>

这部分很简单，就是一个div和一个img标签，src是动态赋值的，也就是鼠标浮动上去获取当前元素的src，然后赋值给img

第二部 "css" 部分

这不是就不阐述了，很简单。

.pro-details-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.pro-details-flex .pro-details-left {
  width: 44%;
  position: relative;
}

.banner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  max-height: 600px;
}
.large_box {
  width: 82%;
  height: 650px;
  overflow: hidden;
}
.large_box ul li {
  position: relative;
  margin-bottom: 100px;
}
.large_box img {
  display: block;
  width: 100%;
  height: auto;
}
.small_box {
  width: 15%;
  /* height: 350px; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.small_list {
  position: relative;
  height: 550px;
  overflow: hidden;
}
.small_list ul {
  height: 550px;
  display: flex;
  flex-direction: column;
}
.small_list ul li {
  position: relative;
  width: 60px;
  border: 1px solid #DDDDDD;
  margin-bottom: 5px;
}
.small_list ul li:hover {
  cursor: pointer;
}
.small_list ul li img {
  display: block;
}
.small_list ul li .mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  background: #000000;
  filter: alpha(opacity=60);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}
.small_list ul li.on .mask {
  display: block;
}
.btns {
  text-align: center;
}
.btns i {
  font-size: 50px;
  line-height: 50px;
  height: 50px;
  width: 100%;
}
.btns i:hover {
  color: #660099;
  cursor: pointer;
}
/*放大镜部分*/
.imgmask1 {
  display: none;
  width: 150px;
  height: 150px;
  background-color: #660099;
  opacity: 0.3;
  position: absolute;
}
.imgmask1:hover {
  cursor: pointer;
}
#box1-1-1 {
  width: 400px;
  height: 400px;
  border: 1px solid lightgrey;
  position: absolute;
  left: 100%;
  top: 0px;
  overflow: hidden;
  display: none;
}
#img1_1 {
  position: absolute;
}

第三部分 "js"部分

首先是大图部分的js

$(function () {
    var $largeBox = $(".large_box");
    var $smallList = $(".small_list");
    var $largeImgs = $largeBox.find("ul li");
    var $smallImgs = $smallList.find("ul li");
    var imgCount = $smallImgs.length;
    var imgWidth = 67;
    var maxVisibleImgs = 8;
    var marginLeft = 0;

    // 设置除第一张外全部隐藏
    $largeImgs.slice(1).hide();
    //给第一种缩略图添加类
    $smallImgs.eq(0).addClass("on");
    // 缩略图点击事件
    $smallImgs.on('click', function () {
      var index = $(this).index();
      var targetIndex = index >= imgCount - 1 ? 0 : index;
      Img(targetIndex);
    });
 })

然后是缩略图部分的js

图片部分

function Img (i) {
    var $smallList = $(".small_list");
    var $smallImgs = $smallList.find("ul li");
    var imgCount = $smallImgs.length;
    var containerHeight = $smallList.height(); // 容器的高度
    var imgHeight = $smallImgs.outerHeight(true);
    var visibleImgs = Math.floor(containerHeight / imgHeight); // 可见的小图数量

    $smallImgs.removeClass("on").eq(i).addClass("on");
    $(".large_box").find("ul li").eq(i).fadeIn().siblings().hide();

    var maxMarginTop = Math.max(imgCount - visibleImgs, 0) * imgHeight; // 最大滚动距离
    if (i >= visibleImgs - 1 && i <= imgCount - 1) {
            var marginTop = Math.min((i - (visibleImgs - 1)) * imgHeight, maxMarginTop); // 计算实际滚动位置
            $smallList.find("ul").stop().animate({
            marginTop: -marginTop + "px"
            });
    } else {
            $smallList.find("ul").stop().animate({
            marginTop: "0px"
            });
    }
}

上下箭头点击事件

/* 上按钮 */
function left_btn () {
    var currentIndex = $(".small_list").find("ul li.on").index();
    var imgCount = $(".small_list").find("ul li").length;
    var targetIndex = (currentIndex - 1 + imgCount) % imgCount;
    t = targetIndex;
    Img(targetIndex);
};

/* 下按钮 */
function right_btn () {
    var currentIndex = $(".small_list").find("ul li.on").index();
    var imgCount = $(".small_list").find("ul li").length;
    var targetIndex = (currentIndex + 1) % imgCount;
    t = targetIndex;
    Img(targetIndex);
};

最后是放大镜部分的js

$(function () {
	
	var $largeBox = $(".large_box");
	var $imgMask1 = $largeBox.find(".imgmask1");
	var $box1_1_1 = $("#box1-1-1");
	var $img1_1 = $("#img1_1");
	var imgMaskSize = 150; // .imgmask1的大小

	$largeBox.on("mouseenter", "ul li", function () {
		$imgMask1.show();
		$box1_1_1.show();
	}).on("mouseleave", "ul li", function () {
		$imgMask1.hide();
		$box1_1_1.hide();
	}).on("mousemove", "ul li", function (event) {
		var $this = $(this);
		var offsetLeft = $this.offset().left;
        var offsetTop = $this.offset().top;

		var offsetX = event.pageX - $largeBox.offset().left;
		var offsetY = event.pageY - $largeBox.offset().top;
		var imgMaskX = offsetX - imgMaskSize / 2;
		var imgMaskY = offsetY - imgMaskSize / 2;
		$imgMask1.css({
			"left": imgMaskX + "px",
			"top": imgMaskY + "px"
		});

		var bigImgMax = $img1_1[0].offsetWidth - $box1_1_1[0].offsetWidth;
		var bigImgX = imgMaskX * bigImgMax / (offsetLeft + $this[0].offsetWidth - imgMaskSize);
		var bigImgY = imgMaskY * bigImgMax / (offsetTop + $this[0].offsetHeight - imgMaskSize);

		var imgUrl = $this.find("img").attr("src");
		$img1_1.attr("src", imgUrl).css({
		"left": -bigImgX + "px",
		"top": -bigImgY + "px"
		});
	});
})

下面是所有代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>title</title>
	<link href="css/style.css" type="text/css" rel="stylesheet" />
	<link rel="stylesheet" href="../static/font/iconfont.css">
</head>
<style>
ul li,ul
{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.pro-details-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.pro-details-flex .pro-details-left {
  width: 44%;
  position: relative;
}

.banner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  max-height: 600px;
}
.large_box {
  width: 82%;
  height: 650px;
  overflow: hidden;
}
.large_box ul li {
  position: relative;
  margin-bottom: 100px;
}
.large_box img {
  display: block;
  width: 100%;
  height: auto;
}
.small_box {
  width: 15%;
  /* height: 350px; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.small_list {
  position: relative;
  height: 550px;
  overflow: hidden;
}
.small_list ul {
  height: 550px;
  display: flex;
  flex-direction: column;
}
.small_list ul li {
  position: relative;
  width: 60px;
  border: 1px solid #DDDDDD;
  margin-bottom: 5px;
}
.small_list ul li:hover {
  cursor: pointer;
}
.small_list ul li img {
  display: block;
}
.small_list ul li .mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  background: #000000;
  filter: alpha(opacity=60);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}
.small_list ul li.on .mask {
  display: block;
}
.btns {
  text-align: center;
}
.btns i {
  font-size: 50px;
  line-height: 50px;
  height: 50px;
  width: 100%;
}
.btns i:hover {
  color: #660099;
  cursor: pointer;
}
/*放大镜部分*/
.imgmask1 {
  display: none;
  width: 150px;
  height: 150px;
  background-color: #660099;
  opacity: 0.3;
  position: absolute;
}
.imgmask1:hover {
  cursor: pointer;
}
#box1-1-1 {
  width: 400px;
  height: 400px;
  border: 1px solid lightgrey;
  position: absolute;
  left: 100%;
  top: 0px;
  overflow: hidden;
  display: none;
}
#img1_1 {
  position: absolute;
}

</style>

<body>
	<div class="pro-details-flex">
		<div class="pro-details-left">
			<div class="banner">
				<div class="small_box">
					<!-- 上箭头点击事件 -->
					<span class="btns lefts_btn" onclick="left_btn()">
						<!-- i引入的是字体图标，可以用图片，就是一个箭头 -->
						<i class="icon-jiantou_liebiaoshouqi_o iconfont"></i></span>
					<!-- 缩略图列表 -->
					<div class="small_list">
						<ul>
							<li class="on">
								<img src="../static/brand/Aristorm/product1.webp" width="60" height="60">
								<!-- 作用是,当前on下面的mask类是背景加深的，也就是表示，当前是在那张图片 -->
								<div class="mask"></div>
							</li>
							<li class="">
								<img src="../static/brand/Aristorm/product2.webp" width="60" height="60">
								<div class="mask"></div>
							</li>
							
						</ul>
					</div>
					<!-- 下箭头点击事件 -->
					<span class="btns rights_btn" onclick="right_btn()">
						<i class="icon-jiantou_liebiaozhankai_o iconfont"></i></span>
				</div>
				<div class="large_box">
					<ul>
						<li>
							<img src="../static/brand/Aristorm/product3.webp" width="600" height="650">
							<!-- 作用是鼠标浮动上去会有一块区域 -->
							<div class="imgmask1"></div>
						</li>
						<li>
							<img src="../static/brand/Aristorm/product3.webp" width="600" height="650">
							<div class="imgmask1"></div>
						</li>
					</ul>
				</div>
			</div>
			<div id="box1-1-1">
				<img src="" alt="" id="img1_1">
			</div>
		</div>
	</div>

	
	<script src="../static/js/jquery-3.4.1.min.js" type="text/javascript"></script>
            <script type="text/javascript">
                    /* 左按钮 */
                    function left_btn () {
                            var currentIndex = $(".small_list").find("ul li.on").index();
                            var imgCount = $(".small_list").find("ul li").length;
                            var targetIndex = (currentIndex - 1 + imgCount) % imgCount;
                            t = targetIndex;
                            Img(targetIndex);
                    };

                    /* 右按钮 */
                    function right_btn () {
                            var currentIndex = $(".small_list").find("ul li.on").index();
                            var imgCount = $(".small_list").find("ul li").length;
                            var targetIndex = (currentIndex + 1) % imgCount;
                            t = targetIndex;
                            Img(targetIndex);
                    };

        /* 图片 */
        function Img (i) {
            var $smallList = $(".small_list");
            var $smallImgs = $smallList.find("ul li");
            var imgCount = $smallImgs.length;
            var containerHeight = $smallList.height(); // 容器的高度
            var imgHeight = $smallImgs.outerHeight(true);
            var visibleImgs = Math.floor(containerHeight / imgHeight); // 可见的小图数量

            $smallImgs.removeClass("on").eq(i).addClass("on");
            $(".large_box").find("ul li").eq(i).fadeIn().siblings().hide();

            var maxMarginTop = Math.max(imgCount - visibleImgs, 0) * imgHeight; // 最大滚动距离
            if (i >= visibleImgs - 1 && i <= imgCount - 1) {
                    var marginTop = Math.min((i - (visibleImgs - 1)) * imgHeight, maxMarginTop); // 计算实际滚动位置
                    $smallList.find("ul").stop().animate({
                    marginTop: -marginTop + "px"
                    });
            } else {
                    $smallList.find("ul").stop().animate({
                    marginTop: "0px"
                    });
            }
        }

        $(function () {
                var $largeBox = $(".large_box");
                var $smallList = $(".small_list");
                var $largeImgs = $largeBox.find("ul li");
                var $smallImgs = $smallList.find("ul li");
                var imgCount = $smallImgs.length;

                // 设置除第一张外全部隐藏
                $largeImgs.slice(1).hide();

                $smallImgs.eq(0).addClass("on");
                $smallImgs.on('click', function () {
                  var index = $(this).index();
                  var targetIndex = index >= imgCount - 1 ? 0 : index;
                  Img(targetIndex);
                });

                var $largeBox = $(".large_box");
                var $imgMask1 = $largeBox.find(".imgmask1");
                var $box1_1_1 = $("#box1-1-1");
                var $img1_1 = $("#img1_1");
                var imgMaskSize = 150; // .imgmask1的大小

                $largeBox.on("mouseenter", "ul li", function () {
                        $imgMask1.show();
                        $box1_1_1.show();
                }).on("mouseleave", "ul li", function () {
                        $imgMask1.hide();
                        $box1_1_1.hide();
                }).on("mousemove", "ul li", function (event) {
                        var $this = $(this);
                        var offsetLeft = $this.offset().left;
                var offsetTop = $this.offset().top;

                var offsetX = event.pageX - $largeBox.offset().left;
                var offsetY = event.pageY - $largeBox.offset().top;
                var imgMaskX = offsetX - imgMaskSize / 2;
                var imgMaskY = offsetY - imgMaskSize / 2;
                $imgMask1.css({
                        "left": imgMaskX + "px",
                        "top": imgMaskY + "px"
                });

                var bigImgMax = $img1_1[0].offsetWidth - $box1_1_1[0].offsetWidth;
                var bigImgX = imgMaskX * bigImgMax / (offsetLeft + $this[0].offsetWidth - imgMaskSize);
                var bigImgY = imgMaskY * bigImgMax / (offsetTop + $this[0].offsetHeight - imgMaskSize);

                var imgUrl = $this.find("img").attr("src");
                $img1_1.attr("src", imgUrl).css({
                "left": -bigImgX + "px",
                "top": -bigImgY + "px"
                });
            });
        })
    </script>
</body>

</html>

结语

完成这个功能呢，也是设计的要求，研究了大半天的时间，网上各种找案例，其实带放大镜的轮播图还是有不少的，但很多都是不带缩略图的，（就算带缩略图呢，也是在下面的，不知道设计怎么想的，一定要发左边，我也是醉了，没办法，只能去研究了，然后发现下载下来，去改插件的代码，太困难了，最后就只能自己去写了）,bug肯定还是有的，也在慢慢完善，最后希望各位大神指点指点。一起去完善这个轮播图。

总结

以上就是本篇文章的全部内容，希望对大家的学习有所帮助，以上就是关于"零"插件实现产品详情轮播图，带放大效果的详细介绍，最后我会继续的去更新它，也希望大家能提出宝贵的意见。

avatar
文章
阅读
粉丝