微信小程序轮播图滚动带动背景图变换及滚动对应图片下标

最新推荐文章于 2026-04-19 04:29:50 发布

原创

最新推荐文章于 2026-04-19 04:29:50 发布 · 3.7k 阅读

标签

#轮播图改变背景

收录于

本文介绍了如何在微信小程序中创建一个轮播图，当轮播图滚动时，背景图和图片下标随之变化。通过展示WXML、WCSS和JS代码片段，详细解释了实现这一功能的步骤，最终达到预期效果。

	今天呢，应召需求需求呢，做了一个轮播图在滑动，后面背景图也会跟着滑动变换。

一开始呢，的确没啥思路，突然想着做了轮播图滑动并且有图片数量的显示变换的，突然脑子一灵光，就想到办法了想试试。
首先呢，先放图片吧
在这里插入图片描述

这个是实现的状态，由于懒得弄gif图，就将就看一下吧
首先是wxml代码

<view class="swiper-all">
      <swiper class='all-img' indicator-dots='{
  
  {indiicatorDots}}' autoplay='{
  
  {autoplay}} ' interval='{
  
  {interval}}' duration='{
  
  {duration}}' indicator-color="#67ac0e" indicator-active-color="green" circular="{
  
  {circular}}" bindchange="indexChange">
        <view wx:for="{
  
  {imgUrl}}">
          <swiper-item>
            <image src='{
  
  {item}}' data-src='{
  
  {item}}' class='carousel-img'></image>
          </swiper-item>
        </vi