unity 图片轮播，左右可切换

最新推荐文章于 2025-04-26 14:15:54 发布
最新推荐文章于 2025-04-26 14:15:54 发布
阅读量5.3k 收藏 47
点赞数 9
分类专栏： unity
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42399500/article/details/119896271
版权
这个代码示例展示了在Unity中如何创建一个图片滚动效果，并且当用户点击图片时能放大显示。`PictrueMove`类处理图片的动画，通过`DOTweening`库实现平移和缩放效果。`FindPictrue`类负责异步加载图片并处理点击事件，点击后会显示放大视图。代码涵盖了Unity的UI交互和资源管理。

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

 

using DG.Tweening;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PictrueMove : MonoBehaviour
{
    public static PictrueMove instance;

    /// <summary>
    /// 每一个初始的状态
    /// </summary>
    private List<Transform> item = new List<Transform> { };

    /// <summary>
    /// 判断动画运动期间，不允许再点击
    /// </summary>
    private bool isPlay = true;

    private float timer = 0.5f;

    /// <summary>
    /// 实例化的物体
    /// </summary>
    public GameObject prefabs;

    void Start()
    {
        instance = this;

        StartGame();
    }

    /// <summary>
    /// 下一页
    /// </summary>
    public void NextPos()
    {
        if (isPlay == false) return;
        isPlay = false;
        StartCoroutine(animPlay());
        for (int i = 0; i < item.Count; i++)
        {

            if (i > 0)
            {
                item[i].DOLocalMove(item[i - 1].localPosition, timer);
                item[i].DOScale(item[i - 1].localScale, timer);
            }
            else
            {
                item[i].DOLocalMove(item[item.Count - 1].localPosition, timer).OnComplete(() => { });
                item[i].DOScale(item[item.Count - 1].localScale, timer);

            }

            int number = item[i].GetComponent<PictrueItem>().index;

            if (number == 0)
            {
                item[i].GetComponent<PictrueItem>().index = item.Count - 1;

            }
            else
            {
                item[i].GetComponent<PictrueItem>().index = number - 1;
                if (number == 3)
                {
                    item[i].SetSiblingIndex(4);
                }
            }

            StartCoroutine(waitSecend(item[i]));


        }
    }


    /// <summary>
    /// 上一页
    /// </summary>
    public void LastPos()
    {
    
        if (isPlay == false) return;
        isPlay = false;
        StartCoroutine(animPlay());
        for (int i = 0; i < item.Count; i++)
        {

            if (i <item.Count-1)
            {
                item[i].DOLocalMove(item[i + 1].localPosition, timer);
                item[i].DOScale(item[i + 1].localScale, timer);
            }
            else
            {
                item[i].DOLocalMove(item[0].localPosition, timer).OnComplete(() => { });
                item[i].DOScale(item[0].localScale, timer);

            }

            int number = item[i].GetComponent<PictrueItem>().index;

            if (number == item.Count - 1)
            {
                item[i].GetComponent<PictrueItem>().index = 0;

            }
            else
            {
                item[i].GetComponent<PictrueItem>().index = number + 1;
                if (number == 1)
                {
                    item[i].SetSiblingIndex(4);
                }
            }

            Cengji(item[i]);

            if (item[i].GetComponent<PictrueItem>().index == 0)
            {
                FindPictrue.instance.Find(false,item[i]);
            }
        }

    }

    /// <summary>
    /// 位置初始化
    /// </summary>
    private void StartGame()
    {
        int i = 0;

        foreach (Transform go in transform)
        {
            item.Add(go);
            go.GetComponent<PictrueItem>().index = i;
            i++;

        }

        for (int j = 0; j < transform.childCount; j++)
        {
            Cengji(item[j]);
        }


    }


    /// <summary>
    /// UI显示优先级
    /// </summary>
    /// <param name="go">物体</param>
    private void Cengji(Transform go)
    {
        int number = go.GetComponent<PictrueItem>().index;

        switch (number)
        {
            case 0:
                go.SetSiblingIndex(0);
                break;
            case 1:
                go.SetSiblingIndex(3);
                break;
            case 2:
                go.SetSiblingIndex(4);
                break;
            case 3:
                go.SetSiblingIndex(2);
                break;
            case 4:
                go.SetSiblingIndex(1);
                break;
        }

    }

    IEnumerator waitSecend(Transform go)
    {
        yield return new WaitForSeconds(timer/2);
        Cengji(go);
        if(go.GetComponent<PictrueItem>().index== item.Count - 1)
        {
            FindPictrue.instance.Find(true,go);
        }
       

    }

    IEnumerator animPlay()
    {
        yield return new WaitForSeconds(timer);
        isPlay = true;
    }
}

代码挂在他的上面

 找到图片代码

using DG.Tweening;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;

public class FindPictrue : MonoBehaviour
{
    public static FindPictrue instance;

    /// <summary>
    /// 保底图片,库里没有文件的时候，作为显示的图片
    /// </summary>
    public Texture2D baodi;
    /// <summary>
    /// 图片存储位置，项目下的文件夹
    /// </summary>
    private string path = Directory.GetCurrentDirectory() + @"/Picture";
    public static string[] dirs;

    /// <summary>
    /// 实例化图片索引
    /// </summary>
    public static int ImageNumber = 0;
    public bool isMove = true;
    public static int CountNumber = 0;
    /// <summary>
    /// 轮播物体
    /// </summary>
    public Transform item;

    /// <summary>
    /// 放大的图片
    /// </summary>
    public Image Da;
    /// <summary>
    /// 放大物体整体
    /// </summary>
    public RawImage fangda;

    public bool isDa = false;

    private void Awake()
    {
        instance = this;
        dirs = Directory.GetFiles(path, "*.png");
        Debug.Log("长度："+dirs.Length);
    }


    void Start()
    {
        StartGame();
    }


    void Update()
    {

    }


    private void StartGame()
    {
        for (int i = 0; i < item.childCount; i++)
        {
            if (dirs.Length == 0)
            {
                item.GetChild(i).GetComponent<PictrueItem>().xian(baodi);
            }
            else
            {
                StartCoroutine(GetTexture(dirs[ImageNumber], item.GetChild(i)));
                AddSuoShow();
            }

        }

    }

    /// <summary>
    /// 图片数量索引循环
    /// </summary>
    public void AddSuoShow()
    {
        ImageNumber++;
        //Debug.Log("那个：" + ImageNumber);
        if (ImageNumber >= dirs.Length)
        {
            ImageNumber = 0;
        }
    }

    public void JianSuoShow()
    {
        ImageNumber--;
        //Debug.Log("那个：" + ImageNumber);
        if (ImageNumber <= 0)
        {
            ImageNumber = dirs.Length-1;
        }
    }

    /// <summary>
    /// 异步加载图片
    /// </summary>
    /// <param name="file">地址</param>
    /// <returns></returns>
    IEnumerator GetTexture(string file, Transform go)
    {
        //这里的地址可以填本地文件地址  file://[文件路径]
        using (UnityWebRequest www = UnityWebRequestTexture.GetTexture(file))
        {
            yield return www.SendWebRequest();
            if (www.isNetworkError)
            {
                Debug.Log(www.error);
            }
            else
            {
                /*这里把贴图转换的过程放到了后台线程来完成，
                并且相比于直接脚本加载图片做了优化，减少了内存分配*/
                Texture2D tx = DownloadHandlerTexture.GetContent(www);
                go.GetComponent<PictrueItem>().xian(tx);
            }
        }

    }

    /// <summary>
    /// 接收到的点击按钮信息
    /// </summary>
    /// <param name="name">按钮参数</param>
    public void ReciveName(Texture2D tx)
    {
        isDa = true;
        Da.gameObject.SetActive(true);
        Da.color = new Color(0, 0, 0, 0);
        fangda.transform.localScale = new Vector3(0.5f, 0.5f, 0.5f);
        fangda.transform.DOScale(new Vector3(0.9f, 0.9f, 0.9f), 1f).SetEase(Ease.InOutQuart);
        Da.DOColor(new Color(0, 0, 0, 0.4f), 1f);
        fangda.texture = tx;
        MoveNumber.instance.StopnextPictru();
    }

    /// <summary>
    /// 关闭放大图片
    /// </summary>
    public void DaQuit()
    {
        isDa = false;
        fangda.transform.DOScale(new Vector3(0.5f, 0.5f, 0.5f), 1f).SetEase(Ease.InExpo).OnComplete(() =>
         {
             Da.gameObject.SetActive(false);
             PictrueAnim.isStop = false;
         });
        Da.DOColor(new Color(0, 0, 0, 0f), 1f).SetEase(Ease.InExpo);

    }


    /// <summary>
    /// 找到物体
    /// </summary>
    /// <param name="go">接受信息的物体</param>
    public void Find(bool addNunmber  ,Transform go)
    {
        if (dirs.Length == 0)
        {
            go.GetComponent<PictrueItem>().xian(baodi);
        }
        else
        {

            StartCoroutine(GetTexture(dirs[ImageNumber], go));
            if (addNunmber)
            {
                AddSuoShow();
            }
            else
            {
                JianSuoShow();
            }
        }
    }

}

 图片可点击放大

Unity的图片轮播
shijinlinaaa的博客
05-18 8432
unity的UI图片轮播，实现按顺序图片外部导入，获取图片名称，点击按钮滑动图片和鼠标滑动图片
Unity图片轮播图功能实现
qq_38602613的博客
10-24 4588
Unity图片轮播图功能实现
图片轮播素材 左右按钮切换 图片叠加
11-12
图片轮播素材 左右按钮切换 图片叠加
Unity图片切换轮播功能
12-06
一个可以在Unity进行图片轮播的demo，只需要给一个texture 2d的图片数组就可以直接用，有多种切换特效
Unity3D图片滑动效果插件
最新发布
gitblog_06786的博客
04-26 377
Unity3D图片滑动效果插件 【下载地址】Unity3D图片滑动效果插件 Unity3D图片滑动效果插件是一款专为Unity3D开发者设计的实用工具，旨在帮助用户轻松实现图片滑动功能。该插件经过精心优化，操作简便，适用于各类图片展示场景。其核心特点包括简单易用的API接口、高度自定义的滑动参数（如速度、方向、动画效果等...
Unity3D 鼠标点击切换图片
rong11417的博客
02-05 8375
Unity3D 鼠标点击切换图片 佩琪和乔治切换 创建ChangeFace脚本，挂在peiqi3上 using System; using System.Collections; using System.Collections.Generic; using UnityEngine; public class ChangeFace : MonoBehaviour { public Sprite sprite1; public Sprite sprite2; private int
Unity3D UGUI 循环轮播
WenHui君_的博客
12-04 4194
Unity3D UGUI 循环轮播 （来总个结）自己写了一个简易的无限轮播效果Demo（效果如下），该Demo是静态的，可根据自己的需求改为动态的。 Demo下载：链接: https://pan.baidu.com/s/13GqjqDqE8x860w65gcxXZQ 提取码: 91pv 下面上代码： using System.Collections; using System.Collections.Generic; using UnityEngine; public class T...
Unity自动从本地加载图片实现图片轮播（图片数量可任意删减）
weixin_56166431的博客
01-26 1431
使用DOtween插件实现图片轮播，用文件字节流的方式实现图片加载（图片数量可任意删减）。
Unity滑动切换图片
06-07
之前在网上找了好久也没找到，自己花了很多时间才弄好的抱你满意
Unity图片自动轮播带滑动切换
LM_1997的博客
05-30 1552
图片自动轮播，带滑动效果。
摇杆（magnitude）
fanfan_hongyun的博客
10-31 542
using UnityEngine; using System.Collections; using UnityEngine.EventSystems;public class Joystick : MonoBehaviour, IDragHandler, IEndDragHandler { private readonly int maxDistance = 150; public
unity3D---切换图片
nuovocinemaparadiso的博客
04-09 4299
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class ButtonScript : MonoBehaviour {     //实现点击鼠标，切换图片     //(物体)     public Gam
Unity实现图片轮播组件
08-26
主要为大家详细介绍了Unity实现图片轮播组件的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
unity3d 左右滑动
09-29
实现一个功能，鼠标向右滑动时响应下一页事件，鼠标向左滑动时响应上一页事件
unity 图片自动轮播（支持分辨率自适应）
Luohuayuxi的博客
04-16 3056
效果： 这个功能需要DOTween插件，所以在用的时候把插件导入unity里，一些思路和方法功能用注释标注上了，然后我觉得这个还可以扩展一下，不过这个以后再说。 接下来直接上代码 /// /// 功能：图片自动轮播（屏幕自适应） /// 要求：最低两张图起步，最高未知，应该是无限张图 /// 作者：郑兴业 /// 日期：2021-4-16 /// 版本：1.0v /// public class AomenUI : MonoBehaviour { private Image[] m_img;//图片集
Unity_UGUI_Scoll Rect实现左右滑动展示图片
weixin_42137574的博客
10-25 5634
创建一个Panel作为容器右键 --> UI --> Panel 给 Panel 添加 Grid Layout Group脚本 并且把 Grid Layout Group 的 Start Axis 设置为 Vertical 调整好 Panel 容器的大小 足够 正好能容下你需要的UI图片 我的Panel调整了 正好容下2张图片 的宽度 记得设置 Pnael容器的 锚...
unity之环状图片轮播
qq_42345116的博客
05-01 3446
unity之环状图片轮播
unity实现图片轮播效果_Unity 制作图片轮播功能
weixin_34769715的博客
02-22 3170
功能：自动播放移动 首尾相接 鼠标移到图片上 时 移动停止并 该图片变大 鼠标离开图片恢复原形 轮播效果继续效果如下 界面布局 大体是这个样子scrollView就是一个底板带Image组件Viewport负责遮罩带Mask组件然后content前期布局使用了Group组件 不过项目需求图片尺寸要变化 所以之后关闭子类Image是一张张图片 初版轮播 上代码using UnityEngine;...
unity图片轮播点击切换图片
07-25
### 回答1： 使用Unity实现图片轮播点击切换图片可以有多种方法。以下是其中一种常用的实现方法： 首先，我们需要准备一组图片素材。在Unity中创建一个空的游戏对象，命名为“ImageSlider”作为容器。然后，将需要显示的图片依次作为子对象添加到该容器中。 接下来，创建一个脚本，命名为“ImageSliderController”，并将其附加到“ImageSlider”游戏对象上。在这个脚本中，我们需要定义一个整型变量“currentIndex”来记录当前显示的图片索引。 在Start()方法中，我们可以初始化currentIndex为0，即显示第一张图片。然后，通过查找游戏对象的子对象获取图片的引用。 接着，我们需要编写一个方法来处理图片切换。可以定义一个公共的方法“ChangeImage(int index)”来切换图片。在该方法中，我们首先通过index参数来更新currentIndex的值。如果currentIndex小于0，将其设置为最后一张图片的索引；如果大于最后一张图片的索引，将其设置为0。 然后，使用SetActive(false)将所有图片隐藏。根据currentIndex的值，使用SetActive(true)来显示对应索引的图片。 最后，在Unity的交互系统中，可以给每个图片对象添加一个Button组件，并将按钮的OnClick事件关联到ImageSliderController脚本的ChangeImage方法上，传递对应的图片索引作为参数。这样，当点击按钮时，就能够切换到相应的图片。 以上是一个简单的Unity图片轮播点击切换图片的实现方法。可以根据具体需求进行扩展和修改。 ### 回答2： Unity提供了多种实现图片轮播点击切换的方法。以下是一种可能的实现方案： 首先，在Unity中创建一个新的场景，用于显示图片轮播界面。在场景中创建一个UI画布，并添加一个RawImage组件，用于显示图片。 然后，在代码中创建一个数组或列表，用于存储需要轮播的图片。可以在编辑器中手动添加图片，也可以使用代码动态加载。 接下来，在代码中实现图片切换逻辑。可以添加一个整数变量用于记录当前显示的图片索引。当点击切换按钮时，通过修改索引实现图片的切换。可以通过监听按钮点击事件或使用触摸事件来触发切换逻辑。 在切换逻辑中，需要将当前索引对应的图片设置给RawImage组件的texture属性，从而实现图片的显示。可以使用Resources.Load()来加载图片资源，或者使用AssetBundle进行加载。 为了实现循环轮播的效果，当当前索引达到最后一张图片时，将索引重置为0，从而实现循环切换。 最后，可以添加其他功能，如自动轮播、切换动画效果等，以增强图片轮播的交互体验。 这样，通过以上步骤就可以在Unity中实现一个简单的图片轮播点击切换的功能。希望对您有所帮助！ ### 回答3： 在Unity中实现图片轮播点击切换图片，可以按照以下步骤进行： 1. 创建一个空的GameObject，命名为"ImageSlider"。在该GameObject上添加一个RectTransform组件，用于控制图片的位置和大小。 2. 在"ImageSlider"上创建一个Image组件，用于显示图片。将需要轮播的图片添加到该Image组件的Sprite属性上。 3. 在"ImageSlider"上添加一个Button组件，用于接收点击事件。在该组件的OnClick事件中创建一个C#脚本方法"ChangeImage()"。 4. 在脚本中定义一个公共整数变量"imageIndex"，用于记录当前显示的图片序号，默认值为0。 5. 在"ChangeImage()"方法中，先判断当前图片序号是否超出图片总数（即是否达到了最后一张图片），如果是，则将图片序号重置为0，表示从第一张图片开始。然后根据图片序号获取对应的图片，并将其设置为Image组件的Sprite属性。 6. 在"ChangeImage()"方法中，最后将图片序号自增1，表示切换到下一张图片。 7. 在Unity编辑器中，将"ImageSlider"对象拖拽到场景中适当的位置，确保其可见性。 8. 运行游戏，并点击"ImageSlider"对象，可以看到图片随着点击事件进行切换。 以上就是使用Unity实现图片轮播点击切换图片的基本步骤。如果需要实现更多功能，如自动轮播、手势滑动切换等，可以在脚本中进一步扩展。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值