小冬SEO

给产品增加一个图集功能js源码

2021-11-13 14:44:40 113991 网站建设

我们在建站的时候,为了更好的用户体验,会给产品增加一个图集展示的效果,当然这种图集展示的效果有很多,自动轮播的也有,手动点选的方式也有,下面我就来分享一个手动点选切换的图集html和js源码,代码很简单,如下:

1.html.js.css代码

<div class="pro_detail_left">
  <div class="jqzoom">
    <img class="fs" id="bigImg" src="/images/1.png"
    alt="">
  </div>
  <ul class="imgList">
    <li style="background:url(/images/1.png) center center /cover;"
    src="/images/1.png" class="">
    </li>
    <li style="background:url(/images/2.png) center center /cover;"
    src="/images/2.png" class="">
    </li>
    <li style="background:url(/images/3.png) center center /cover;"
    src="/images/3.png" class="">
    </li>
    <li style="background:url(/images/4.png) center center /cover;"
    src="/images/4.png" class="onn">
    </li>
  </ul>
</div>
<script>
  var img = document.querySelectorAll(".imgList li"),
  box = document.querySelectorAll(".jqzoom img")[0];
  img[0].classList.add("onn");
  for (let i = 0; i < img.length; i++) {
      img[i].onclick = function(){
          let imgsrc = img[i].getAttribute("src");
          for (let t = 0; t < img.length; t++) {
              img[t].classList.remove("onn")
          }
          img[i].classList.add("onn");
          box.setAttribute("src", img[i].getAttribute("src"))
      }
  }
</script>
<style>
.pro_show_up_l{ width:440px; float:left;}
.pro_detail_left {float:left; overflow:hidden; margin-right:20px;}
.pro_detail_left .jqzoom {
    border: 1px solid #e2e2e2;
    float: left;
    position: relative;
    padding: 0px;
    cursor: pointer;
    height: 420px;
    width: 420px;
    background: #f2f2f2;
    overflow: hidden;
}
.pro_detail_left .fs {
    width: 100%;
    height: auto;
    line-height: 420px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.pro_detail_left ul.imgList {
    float: left;
    margin-top: 10px;
    white-space: nowrap;
    overflow-x: scroll;
    height: 110px;
    width: 422px;
}
.pro_detail_left ul.imgList li {
    height: 83px;
    position: relative;
    width: 83px;
    border: solid 1px #e2e2e2;
    display: inline-block;
  overflow: hidden;
  margin-right: 5px;
  cursor: pointer;
}
.pro_detail_left ul.imgList li img {
    width: 82px;
    height: auto;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}
.pro_detail_left ul.imgList li img:hover { background:#eee; }
.pro_detail_left ul.imgList li.onn {
border: solid 1px #ff2c4c;
}
.pro_detail_left .zoomdiv{ background:#fff;}
.pro_detail_left .zoomdiv img{ display:inline-block; vertical-align:top;}
</style>

2.预览效果

下面是测试的效果,自己可以修改

3.第二种html代码

上面的代码是以背景图的方式展示出来,当然也可以直接以图片的形式展示出来,<li><img src=""></li>如下:

<div class="pro_detail_left">
  <div class="jqzoom">
    <img class="fs" id="bigImg" src="/images/1.png"
    alt="">
  </div>
  <ul class="imgList">
    <li class="onn"><img src="/images/1.png"></li>
    <li class=""><img src="/images/2.png"></li>
    <li class=""><img src="/images/3.png"></li>
    <li class=""><img src="/images/4.png"></li>
  </ul>
</div>
<script>
  var img = document.querySelectorAll(".imgList li"),
  box = document.querySelectorAll(".jqzoom img")[0];
  img[0].classList.add("onn");
  for (let i = 0; i < img.length; i++) {
      img[i].onclick = function(){
          let imgsrc = img[i].getAttribute("src");
          for (let t = 0; t < img.length; t++) {
              img[t].classList.remove("onn")
          }
          img[i].classList.add("onn");
          box.setAttribute("src", img[i].getAttribute("src"))
      }
  }
</script>
<style>
.pro_show_up_l{ width:440px; float:left;}
.pro_detail_left {float:left; overflow:hidden; margin-right:20px;}
.pro_detail_left .jqzoom {
    border: 1px solid #e2e2e2;
    float: left;
    position: relative;
    padding: 0px;
    cursor: pointer;
    height: 420px;
    width: 420px;
    background: #f2f2f2;
    overflow: hidden;
}
.pro_detail_left .fs {
    width: 100%;
    height: auto;
    line-height: 420px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.pro_detail_left ul.imgList {
    float: left;
    margin-top: 10px;
    white-space: nowrap;
    overflow-x: scroll;
    height: 110px;
    width: 422px;
}
.pro_detail_left ul.imgList li {
    height: 83px;
    position: relative;
    width: 83px;
    border: solid 1px #e2e2e2;
    display: inline-block;
  overflow: hidden;
  margin-right: 5px;
  cursor: pointer;
}
.pro_detail_left ul.imgList li img {
    width: 82px;
    height: auto;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}
.pro_detail_left ul.imgList li img:hover { background:#eee; }
.pro_detail_left ul.imgList li.onn {
    border: solid 1px #ff2c4c;
}
.pro_detail_left .zoomdiv{ background:#fff;}
.pro_detail_left .zoomdiv img{ display:inline-block; vertical-align:top;}
</style>

下面是测试的效果,自己可以修改

版权保护: 本文由小冬SEO编辑发布,转载请保留链接: https://www.cdseoyh.cn/jianzhan/170.html

小冬SEO 草根seoer,从事搜索引擎关键词优化,喜欢学习专研各类SEO优化技巧—小冬SEO博客
  • 138文章总数
  • 113992本页访问
  • 运营时间
  • 标签

    友情链接

      {dede:sql sql="select url,webname from dede_flink where typeid = (select id from dede_flinktype where typename=~typename~)"}
    • [field:webname/]
    • {/dede:sql}