JavaScript 产品图片滑动切换轮播特效代码

创客云


电商类网站必须用到的轮播炫酷效果,十足干货源码,微信小程序商品详情页交互源码(选择商品类型切换、预览商品图片) ,选项卡切换标签图片列表滚动特效代码,此款特效采用纯原生态js,不仅实现tab选项卡切换标签效果,同时图片列表还可以左右滚动,点击相应方向箭头滚动。

  1. <link rel="stylesheet" href="css/style.css">
  2. <script  src="js/script.js"></script>
  3. <div class="carousel">
  4.   <div class="slides">
  5.     <img src="img/4.png" alt="Stainless Steel" />
  6.     <img src="img/3.png" alt="Army Green" />
  7.     <img src="img/2.png" alt="Cranberry" />
  8.     <img src="img/1.png" alt="Midnight Blue" />
  9.   </div>
  10.   <div class="overlays">
  11.     <div class="bar" style="--bar-color: #bdc3c7;"></div>
  12.     <div class="bar" style="--bar-color: #218c74;"></div>
  13.     <div class="bar" style="--bar-color: #dd6b7b;"></div>
  14.     <div class="bar" style="--bar-color: #30465c;"></div>
  15.   </div>
  16.   <ul class="nav-links">
  17.     <li><a href="#" class="nav-link">Stainless Steel</a></li>
  18.     <li><a href="#" class="nav-link">Army Green</a></li>
  19.     <li><a href="#" class="nav-link">Cranberry</a></li>
  20.     <li><a href="#" class="nav-link">Midnight Blue</a></li>
  21.   </ul>
  22. </div>
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/60195.html
云模板

发表评论