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

丶枕边人

于 2019-08-27 16:28:51 发布

阅读量3.7k

点赞数 3

分类专栏：微信小程序文章标签：轮播图改变背景

本文链接：https://blog.youkuaiyun.com/nan961136007/article/details/100102798

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

这个是实现的状态，由于懒得弄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}}"&

最低0.47元/天解锁文章