多个内容滑动轮播图【前端】

 

前几天写的前端项目当中自己写了一个比较好用的轮播组件，分享给大家 

图片具有点击效果和滑动效果，这里作者放了9张图片，大家有需要可以使用~ 

图片在这里大家可以直接进行测试 

 

 总组件代码：

这里的代码作者用的是Vue3，大家没有学过的可以使用al给你转成正常的js代码~~~ 

  1.  
  2. <script setup>
  3. import { onMounted, onUnmounted } from 'vue'
  4. onMounted(() => {
  5.   const container = document.querySelector('.product_box')
  6.   const leftIcon = document.querySelector('.left_icon')
  7.   const rightIcon = document.querySelector('.right_icon')
  8.   const items1 = document.querySelectorAll('.product_detail')
  9.   const itemCount = items1.length
  10.   let currentIndex = 0
  11.   let isAnimating = false
  12.   let autoSlideInterval
  13.   let visibleItems = 3 // 初始值
  14.  
  15.   // 初始化
  16.   updateCarousel()
  17.  
  18.   // 监听视窗大小变化
  19.   window.addEventListener('resize', () => {
  20.     updateCarousel()
  21.   })
  22.  
  23.   function updateCarousel() {
  24.     if (isAnimating) return
  25.     isAnimating = true
  26.  
  27.     // 计算位移百分比（每个项目占 1/visibleItems）
  28.     const translateX = -currentIndex * (100 / visibleItems / 1.07)
  29.     container.style.transform = `translateX(${translateX}%)`
  30.     container.style.transition = '1s'
  31.  
  32.     // 重置动画状态
  33.     setTimeout(() => {
  34.       isAnimating = false
  35.     }, 500)
  36.   }
  37.  
  38.   function nextSlide1() {
  39.     stopAutoSlide()
  40.     if (currentIndex >= itemCount - visibleItems) {
  41.       // 到达最后时回到第一个
  42.       currentIndex = 0
  43.     } else {
  44.       currentIndex++
  45.     }
  46.     updateCarousel()
  47.     startAutoSlide()
  48.   }
  49.  
  50.   function prevSlide1() {
  51.     stopAutoSlide()
  52.     if (currentIndex <= 0) {
  53.       // 到达第一个时跳到最后
  54.       currentIndex = itemCount - visibleItems
  55.     } else {
  56.       currentIndex--
  57.     }
  58.     updateCarousel()
  59.     startAutoSlide()
  60.   }
  61.  
  62.   function startAutoSlide() {
  63.     autoSlideInterval = setInterval(nextSlide1, 3000) // 每3秒切换一次
  64.   }
  65.  
  66.   // 停止自动轮播的函数
  67.   function stopAutoSlide() {
  68.     if (autoSlideInterval) {
  69.       clearInterval(autoSlideInterval)
  70.       autoSlideInterval = null
  71.     }
  72.   }
  73.  
  74.   // 添加按钮事件
  75.   rightIcon.addEventListener('click', nextSlide1)
  76.   leftIcon.addEventListener('click', prevSlide1)
  77.  
  78.   startAutoSlide()
  79.  
  80.   onUnmounted(() => {
  81.     clearInterval(autoSlideInterval)
  82.   })
  83. })
  84. script>
  85. <template>
  86.   <div class="product_content">
  87.     <div class="product_box">
  88.       <div class="product_content_box">
  89.         <div class="product_detail product_detail_1">
  90.           <div class="product_topImg">
  91.             <img src="@/assets/image1.png" alt="" />
  92.           div>
  93.           <div class="product_h">动物头像div>
  94.           <div class="product_hr">div>
  95.           <div class="product_p">可爱小猫div>
  96.           <div class="product_button" @click="toProduct('高压电器产业')">div>
  97.         div>
  98.         <div class="product_detail">
  99.           <div class="product_topImg">
  100.             <img src="@/assets/image2.png" alt="" />
  101.           div>
  102.           <div class="product_h">动物头像div>
  103.           <div class="product_hr">div>
  104.           <div class="product_p">可爱小猫div>
  105.           <div class="product_button" @click="toProduct('运维检修业务')">div>
  106.         div>
  107.         <div class="product_detail">
  108.           <div class="product_topImg">
  109.             <img src="@/assets/image3.png" alt="" />
  110.           div>
  111.           <div class="product_h">动物头像div>
  112.           <div class="product_hr">div>
  113.           <div class="product_p">可爱小猫div>
  114.           <div class="product_button" @click="toProduct('零部件制造产业')">div>
  115.         div>
  116.         <div class="product_detail">
  117.           <div class="product_topImg">
  118.             <img src="@/assets/image1.png" alt="" />
  119.           div>
  120.           <div class="product_h">动物头像div>
  121.           <div class="product_hr">div>
  122.           <div class="product_p">可爱小猫div>
  123.           <div class="product_button" @click="toProduct('电力储能业务')">div>
  124.         div>
  125.         <div class="product_detail">
  126.           <div class="product_topImg">
  127.             <img src="@/assets/image2.png" alt="" />
  128.           div>
  129.           <div class="product_h">动物头像div>
  130.           <div class="product_hr">div>
  131.           <div class="product_p">可爱小猫div>
  132.           <div class="product_button" @click="toProduct('配电网产业')">div>
  133.         div>
  134.         <div class="product_detail">
  135.           <div class="product_topImg">
  136.             <img src="@/assets/image1.png" alt="" />
  137.           div>
  138.           <div class="product_h">动物头像div>
  139.           <div class="product_hr">div>
  140.           <div class="product_p">可爱小猫div>
  141.           <div class="product_button" @click="toProduct('系统集成业务')">div>
  142.         div>
  143.         <div class="product_detail">
  144.           <div class="product_topImg">
  145.             <img src="@/assets/image2.png" alt="" />
  146.           div>
  147.           <div class="product_h">动物头像div>
  148.           <div class="product_hr">div>
  149.           <div class="product_p">可爱小猫div>
  150.           <div class="product_button" @click="toProduct('智慧配用电业务')">div>
  151.         div>
  152.         <div class="product_detail">
  153.           <div class="product_topImg">
  154.             <img src="@/assets/image3.png" alt="" />
  155.           div>
  156.           <div class="product_h">动物头像div>
  157.           <div class="product_hr">div>
  158.           <div class="product_p">可爱小猫div>
  159.           <div class="product_button" @click="toProduct('综合能源服务业务')">div>
  160.         div>
  161.       div>
  162.     div>
  163.     <div class="left_icon"><span class="icon iconfont">span>div>
  164.     <div class="right_icon"><span class="icon iconfont">span>div>
  165.   div>
  166. template>
  167. <style scoped>
  168. .product_box {
  169.   /* overflow: hidden; */
  170.   width: 94%;
  171.   min-width: 120rem;
  172.   margin: auto;
  173.   padding-left: 1.875rem;
  174.   padding-right: 4.375rem;
  175. }
  176.  
  177. .product_content_box {
  178.   display: flex;
  179.   width: 95%;
  180.   margin: auto;
  181. }
  182.  
  183. .product_detail {
  184.   flex-shrink: 0;
  185.   width: calc(33.333%);
  186.   /* 每个图标占据三分之一的视口宽度 */
  187.   height: 43.75rem;
  188.   margin: 0.625rem;
  189.   color: white;
  190.   align-items: center;
  191.   justify-content: center;
  192.   transition: transform 0.3s ease;
  193.   animation: scaleIn 1s ease-in-out;
  194. }
  195.  
  196. .product_topImg {
  197.   position: relative;
  198.   width: 26.25rem;
  199.   height: 26.25rem;
  200.   margin: auto;
  201.   cursor: pointer;
  202.   z-index: 1000;
  203.   animation: floatAnimation 3s ease-in-out infinite;
  204. }
  205.  
  206. .product_topImg img {
  207.   width: 100%;
  208.   height: 100%;
  209.   margin-left: -0.3125rem;
  210.   margin: auto;
  211. }
  212.  
  213. @keyframes floatAnimation {
  214.   0%,
  215.   100% {
  216.     transform: translateY(0);
  217.   }
  218.   50% {
  219.     transform: translateY(-1.5625rem);
  220.   }
  221. }
  222.  
  223. .product_topImg:before {
  224.   content: '';
  225.   position: absolute;
  226.   top: 0;
  227.   left: 0;
  228.   width: 100%;
  229.   height: 100%;
  230.   background-size: cover;
  231.   background-position: center;
  232.   transition: opacity 1s ease;
  233.   /* 设置过渡效果 */
  234.   opacity: 0.3;
  235.   /* 默认透明 */
  236.   z-index: -1;
  237.   /* 确保在图片下方 */
  238. }
  239.  
  240. .product_topImg:hover:before {
  241.   background-image: url('@/assets/imgs/_10_homePageImgs/circle.png');
  242.   /* 悬停时的背景图片 */
  243.   opacity: 1;
  244. }
  245.  
  246. .product_h {
  247.   font-size: 2.5rem;
  248.   font-family: 'AlibabaPuHuiTi_2_55_Regular';
  249.   color: rgb(0, 111, 193);
  250.   text-align: center;
  251. }
  252.  
  253. .product_hr {
  254.   width: 6.625rem;
  255.   height: 0.125rem;
  256.   background-color: #2081c9;
  257.   text-align: center;
  258.   margin: 1.25rem 0rem;
  259.   margin: auto;
  260.   margin-top: 0.625rem;
  261.   margin-bottom: 0.9375rem;
  262. }
  263.  
  264. .product_p {
  265.   width: 21.625rem;
  266.   height: 4.5rem;
  267.   font-size: 1.25rem;
  268.   font-family: 'AlibabaPuHuiTi_2_45_Light';
  269.   color: rgb(89, 87, 87);
  270.   text-align: center;
  271.   margin: auto;
  272. }
  273.  
  274. .product_button {
  275.   position: relative;
  276.   width: 8.6875rem;
  277.   height: 2rem;
  278.   margin: auto;
  279.   text-align: center;
  280.   background-image: url('@/assets/imgs/_10_homePageImgs/button.png');
  281.   background-size: contain;
  282.   margin-top: 1.875rem;
  283.   transition: all 0.3s ease;
  284.   cursor: pointer;
  285.   background-repeat: no-repeat;
  286. }
  287.  
  288. .product_button:hover {
  289.   transform: scale(1.1);
  290.   /* translate(0, -0.3125rem) 使文字在Y轴方向向上移动0.3125rem，scale(1.1) 使文字放大到原来的1.1倍 */
  291.   color: #58ffa9;
  292.   /* 改变文字颜色 */
  293. }
  294.  
  295. .product_button span {
  296.   position: absolute;
  297.   top: 0;
  298.   left: 2.1rem;
  299.   font-size: 1.125rem;
  300.   line-height: 2rem;
  301.   font-family: 'AlibabaPuHuiTi_2_45_Light';
  302.   color: rgb(0, 111, 193);
  303. }
  304.  
  305. .left_icon .icon {
  306.   top: 10rem;
  307.   left: 3.75rem;
  308.   position: absolute;
  309.   font-size: 4.375rem;
  310.   color: #006fc1;
  311.   z-index: 100;
  312.   cursor: pointer;
  313. }
  314.  
  315. .right_icon .icon {
  316.   position: absolute;
  317.   font-size: 4.375rem;
  318.   top: 10rem;
  319.   right: 3.125rem;
  320.   color: #006fc1;
  321.   z-index: 100;
  322.   cursor: pointer;
  323. }
  324. style>

 

注：本文转载自blog.csdn.net的心.c的文章"https://blog.csdn.net/2301_81253185/article/details/146460528"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！