轮播图(UI替换)

 1.ui  fade切换

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
[RequireComponent(typeof(Image))]
public class Luo_bo : MonoBehaviour
{
    private Image image;
    [Header("轮播精灵")]
    public Sprite[] sprites;
    [Header("轮播时间间隔")]
    public float time=3;

    private bool stop;
    private int number;
    // Start is called before the first frame update
    void Start()
    {
        image = GetComponent<Image>();

        image.sprite = sprites[0];
        StartCoroutine(Lun_bo());
    } 
    IEnumerator Lun_bo()
    {
        while (true)
        {
            if(stop==false)
            {
                stop = true;
                image.sprite = sprites[number];
                yield return new WaitForSeconds(time);
                image.DOFade(0, 0.5f);
                yield return new WaitForSeconds(0.5f);
                number++;
                if (number == sprites.Length)
                {
                    number = 0;
                }
                image.sprite = sprites[number];
                image.DOFade(1, 0.5f);

                yield return new WaitForSeconds(time+0.5f);

                stop = false;
            }
            
        }

    }
}

2.ui 左右更替 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
public class Lun_bo_two : MonoBehaviour
{
    public Mask mask_view;
    [Header("移动的框(2)")]
    public Image[] one_two;
    [Header("显示的精灵")]
    public Sprite[] sprites;
    [Header("切换速度")]
    public float speed;
    [Header("左右方向")]
    public bool back_forward;
    private int index;
    private int index_number;
    //遮罩
    private float width_rect;
   
    // Start is called before the first frame update
    void Start()
    {
        width_rect = mask_view.rectTransform.rect.width;

        //从右往左
        if (back_forward==true)
        {
            one_two[0].transform.localPosition = Vector3.zero;
            one_two[1].transform.localPosition = Vector3.zero+new Vector3 (width_rect, 0,0);
        }
        //从左往右
        else
        {
            one_two[0].transform.localPosition = Vector3.zero;
            one_two[1].transform.localPosition = Vector3.zero + new Vector3(-width_rect, 0, 0);
        }
        StartCoroutine(Start_go(speed, back_forward));
    }
    IEnumerator Start_go(float speed, bool back_forward)
    {
        while (true)
        {
            //从右往左
            if (back_forward == true)
            {
                if (index_number % 2 == 0)
                {
                    one_two[0].sprite = sprites[index];
                    if (index == sprites.Length - 1)
                    {
                        index = -1;
                    }

                    one_two[1].sprite = sprites[index + 1];

                    one_two[0].transform.DOLocalMoveX(-width_rect, speed);
                    one_two[1].transform.DOLocalMoveX(0, speed);
                }
                else
                {
                    one_two[1].sprite = sprites[index];
                    if (index == sprites.Length - 1)
                    {
                        index = -1;
                    }
                    one_two[0].sprite = sprites[index + 1];

                    one_two[0].transform.DOLocalMoveX(0, speed);
                    one_two[1].transform.DOLocalMoveX(-width_rect, speed);

                }
                yield return new WaitForSeconds(speed);

                if (index_number % 2 == 0)
                {
                    one_two[0].transform.localPosition = new Vector3(width_rect, 0, 0);

                }
                else
                {
                    one_two[1].transform.localPosition = new Vector3(width_rect, 0, 0);
                }
                index++;
                index_number++;
            }
            //从左往右
            else
            {

              

                if (index_number % 2 == 0)
                {
                    one_two[0].sprite = sprites[index];
                    if (index == sprites.Length - 1)
                    {
                        index =-1;
                    }

                    one_two[1].sprite = sprites[index + 1];

                    one_two[0].transform.DOLocalMoveX(width_rect, speed);
                    one_two[1].transform.DOLocalMoveX(0, speed);
                }
                else
                {
                    one_two[1].sprite = sprites[index];
                    if (index == sprites.Length - 1)
                    {
                        index = -1;
                    }
                    one_two[0].sprite = sprites[index + 1];

                    one_two[0].transform.DOLocalMoveX(0, speed);
                    one_two[1].transform.DOLocalMoveX(width_rect, speed);
                }
                yield return new WaitForSeconds(speed);
               
                if (index_number % 2 == 0)
                {
                    one_two[0].transform.localPosition = new Vector3(-width_rect, 0, 0);

                }
                else
                {
                    one_two[1].transform.localPosition = new Vector3(-width_rect, 0, 0);
                }
                index++;
                index_number++;

               

            }
          
        }
        
    }
}

要使用Taro UI轮播图组件,你需要按照以下步骤进行操作: 1. 在你的Taro项目中,确保已经安装了Taro UI库。如果没有安装,可以使用以下命令进行安装: ``` npm install taro-ui ``` 2. 在你的样式文件中,引入轮播图组件的样式。根据你提供的引用内容,你可以在样式文件中引入`icon.scss`、`avatar.scss`和`button.scss`这些文件,但这些文件与轮播图组件无关。 3. 在你的页面文件中,引入Taro UI轮播图组件。你需要在页面文件的`.jsx`或`.tsx`文件中引入轮播图组件的代码,并使用该组件进行渲染。 ``` import { Swiper, SwiperItem } from 'taro-ui' ``` 4. 在你的页面文件中,编写轮播图组件的代码。你可以使用`Swiper`组件和`SwiperItem`组件来创建轮播图。例如: ``` <Swiper className='swiper-container' indicatorColor='#999' indicatorActiveColor='#333' circular indicatorDots autoplay > <SwiperItem> <Image className='swiper-image' src='https://example.com/image1.jpg' /> </SwiperItem> <SwiperItem> <Image className='swiper-image' src='https://example.com/image2.jpg' /> </SwiperItem> ... </Swiper> ``` 这里的`Image`组件可以用来显示轮播图中的图片,你可以根据实际需求替换图片的URL。 5. 在你的页面文件中,根据需要为轮播图组件添加样式。你可以在样式文件中定义`.swiper-container`和`.swiper-image`类名,并在轮播图组件中使用这些类名来设置样式。 ``` .swiper-container { width: 100%; height: 200px; } .swiper-image { width: 100%; height: 100%; } ``` 这样,你就可以在Taro项目中使用Taro UI轮播图组件了。请注意,以上代码只是示例,你可以根据自己的需要进行修改和调整。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值