【QT学习】实现鼠标滑动触发的轮播图

已于 2022-09-26 17:29:22 修改
阅读量2.3k 收藏 23
点赞数 4
分类专栏： QT 学习整理 文章标签： qt 学习 ui c++ 开发语言
于 2022-09-21 16:47:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59134387/article/details/126972116
版权

文章目录

前言

   轮播图是指在一个模块或者窗口中，通过鼠标点击或滑动后,可以看到多张图片。不论是爱奇艺的视频播放器，还是网易云的音乐播放器中，我们都可以看到在其首页有一个轮播图模块。本篇，我们将介绍如何实现鼠标滑动触发的轮播图。

一、实现效果

在这里插入图片描述

二、实现原理

1.轮播窗口组成

   该窗口由五个QLabel类的标签控件和五个QPushButton类的按钮控件组成。

2.标签控件作用

   利用标签来插入圆点图片，如下图所示。

在这里插入图片描述

3.按钮控件作用

   利用按钮来插入轮播图片，可以通过按钮的点击信号触发槽函数，实现点击后的界面跳转。

在这里插入图片描述

4.总体实现目标

   轮播窗口将实现以下效果：当我们把鼠标滑入到不同的圆点图片标签时，展示与标签绑定的图片按钮。

三、实现流程

1.实现步骤简述

 （1）创建标签和按钮，插入图片并初始化。
 （2）在每个标签控件上安装了事件滤波器。
 （3）将事件滤波器的触发事件设置为鼠标滑入触发。
 （4）为每个标签控件设置相应的触发动作，即鼠标滑入后图片按钮切换。

2.编码前准备工作

  • 在编写代码前，我们需要先准备好标签和按钮对应的素材图片，如下图所示。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

3.创建轮播窗口类

可以看到下面的代码，我们在类中定义了五个标签和五个按钮控件，以及事件过滤器函数。

在这里插入图片描述

4.初始化标签和按钮控件

下图为部分初始化代码，若需要查看完整源码，请下拉到文章末尾。

在这里插入图片描述

5.标签控件安装事件过滤器

重点注意：事件过滤器在轮播窗口的构造函数中安装，且必须先初始化标签再安装，否则无法触发。

在这里插入图片描述

6.设置触发条件和触发动作

下图为事件过滤函数部分代码，触发对象为某个标签，触发条件为鼠标滑入，触发动作为显示对应图片。

在这里插入图片描述

四、完整源码

1.main.cpp文件

#include <QApplication>
#include "slideshowwin.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    slideshowWin w;
    w.show();
    return a.exec();
}

2.slideShow.h文件

#ifndef SLIDESHOWWIN_H
#define SLIDESHOWWIN_H

#include <QWidget>
#include <QEvent>
#include <QLabel>
#include <QPushButton>

class slideshowWin : public QWidget
{
    Q_OBJECT
public:
    explicit slideshowWin(QWidget *parent = 0);
    QLabel *point1,*point2,*point3,*point4,*point5;
    QPushButton *picBtn1,*picBtn2,*picBtn3,*picBtn4,*picBtn5;
    bool eventFilter(QObject *obj, QEvent *event);
signals:

public slots:
};

#endif // SLIDESHOWWIN_H

3.slideShow.cpp文件

#include <QPixmap>
#include <QDebug>
#include <QMouseEvent>
#include "slideshowwin.h"

slideshowWin::slideshowWin(QWidget *parent) : QWidget(parent)
{
    //设置窗口大小
    this->setFixedSize(995,295);

	//创建按钮并初始化
    this->picBtn1 = new QPushButton(this);
    this->picBtn1->setGeometry(0,0,995,295);
    this->picBtn1->setStyleSheet("QPushButton{border-image:url(./picture/LB1.png);}");
    this->picBtn1->show();

    this->picBtn2 = new QPushButton(this);
    this->picBtn2->setGeometry(0,0,995,295);
    this->picBtn2->setStyleSheet("QPushButton{border-image:url(./picture/LB2.png);}");
    this->picBtn2->hide();

    this->picBtn3 = new QPushButton(this);
    this->picBtn3->setGeometry(0,0,995,295);
    this->picBtn3->setStyleSheet("QPushButton{border-image:url(./picture/LB3.png);}");
    this->picBtn3->hide();

    this->picBtn4 = new QPushButton(this);
    this->picBtn4->setGeometry(0,0,995,295);
    this->picBtn4->setStyleSheet("QPushButton{border-image:url(./picture/LB4.png);}");
    this->picBtn4->hide();

    this->picBtn5 = new QPushButton(this);
    this->picBtn5->setGeometry(0,0,995,295);
    this->picBtn5->setStyleSheet("QPushButton{border-image:url(./picture/LB5.png);}");
    this->picBtn5->hide();

    //创建标签并初始化
    this->point1 = new QLabel(this);
    this->point1->setGeometry(420,250,24,30);
    this->point1->setPixmap(QPixmap("./picture/c1.png"));
    this->point1->setScaledContents(true);

    this->point2 = new QLabel(this);
    this->point2->setGeometry(460,250,24,30);
    this->point2->setPixmap(QPixmap("./picture/c2.png"));
    this->point2->setScaledContents(true);

    this->point3 = new QLabel(this);
    this->point3->setGeometry(500,250,24,30);
    this->point3->setPixmap(QPixmap("./picture/c2.png"));
    this->point3->setScaledContents(true);

    this->point4 = new QLabel(this);
    this->point4->setGeometry(540,250,24,30);
    this->point4->setPixmap(QPixmap("./picture/c2.png"));
    this->point4->setScaledContents(true);

    this->point5 = new QLabel(this);
    this->point5->setGeometry(580,250,24,30);
    this->point5->setPixmap(QPixmap("./picture/c2.png"));
    this->point5->setScaledContents(true);

    //安装事件过滤器，控件作为窗口的事件过滤器
    this->point1->installEventFilter(this);
    this->point2->installEventFilter(this);
    this->point3->installEventFilter(this);
    this->point4->installEventFilter(this);
    this->point5->installEventFilter(this);
}

bool slideshowWin::eventFilter(QObject *obj, QEvent *event)
{
    if(event->type() == QEvent::Enter)
    {
        if(obj == this->point1)
        {
            this->point1->setPixmap(QPixmap("./picture/c1.png"));
            this->point2->setPixmap(QPixmap("./picture/c2.png"));
            this->point3->setPixmap(QPixmap("./picture/c2.png"));
            this->point4->setPixmap(QPixmap("./picture/c2.png"));
            this->point5->setPixmap(QPixmap("./picture/c2.png"));
            this->picBtn1->show();
            this->picBtn2->hide();
            this->picBtn3->hide();
            this->picBtn4->hide();
            this->picBtn5->hide();
            return true;
        }
        else if(obj == this->point2)
        {
            this->point1->setPixmap(QPixmap("./picture/c2.png"));
            this->point2->setPixmap(QPixmap("./picture/c1.png"));
            this->point3->setPixmap(QPixmap("./picture/c2.png"));
            this->point4->setPixmap(QPixmap("./picture/c2.png"));
            this->point5->setPixmap(QPixmap("./picture/c2.png"));
            this->picBtn1->hide();
            this->picBtn2->show();
            this->picBtn3->hide();
            this->picBtn4->hide();
            this->picBtn5->hide();
            return true;
        }
        else if(obj == this->point3)
        {
            this->point1->setPixmap(QPixmap("./picture/c2.png"));
            this->point2->setPixmap(QPixmap("./picture/c2.png"));
            this->point3->setPixmap(QPixmap("./picture/c1.png"));
            this->point4->setPixmap(QPixmap("./picture/c2.png"));
            this->point5->setPixmap(QPixmap("./picture/c2.png"));
            this->picBtn1->hide();
            this->picBtn2->hide();
            this->picBtn3->show();
            this->picBtn4->hide();
            this->picBtn5->hide();
            return true;
        }
        else if(obj == this->point4)
        {
            this->point1->setPixmap(QPixmap("./picture/c2.png"));
            this->point2->setPixmap(QPixmap("./picture/c2.png"));
            this->point3->setPixmap(QPixmap("./picture/c2.png"));
            this->point4->setPixmap(QPixmap("./picture/c1.png"));
            this->point5->setPixmap(QPixmap("./picture/c2.png"));
            this->picBtn1->hide();
            this->picBtn2->hide();
            this->picBtn3->hide();
            this->picBtn4->show();
            this->picBtn5->hide();
            return true;
        }
        else if(obj == this->point5)
        {
            this->point1->setPixmap(QPixmap("./picture/c2.png"));
            this->point2->setPixmap(QPixmap("./picture/c2.png"));
            this->point3->setPixmap(QPixmap("./picture/c2.png"));
            this->point4->setPixmap(QPixmap("./picture/c2.png"));
            this->point5->setPixmap(QPixmap("./picture/c1.png"));
            this->picBtn1->hide();
            this->picBtn2->hide();
            this->picBtn3->hide();
            this->picBtn4->hide();
            this->picBtn5->show();
            return true;
        }
        return false;
    }
    return QWidget::eventFilter(obj, event);
}

总结

   以上就是实现鼠标滑动触发图片轮播的所有内容，希望大家阅读后都能有所收获！需要图片素材及相应的工程源文件的读者，关注博主并在该篇文章下方评论写下邮箱地址，将以压缩包形式发送。
   原创不易，转载请标明出处，若文章出现有误之处，欢迎读者留言指正批评！

孤生i
关注
  • 4
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
专栏目录
Qt实现鼠标擦拭显示图片
03-04
Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭
Qt 轮播图实现（全网轮播图最详细注释讲解）
进击的小程序员
06-07 3320
废话不多说，先上效果。 然后这个我设置的是每3s他会自动往下一页滑动。 最下面有几个另外做的小功能。这样可以使我们的需求写成活的。 其实虽然看是个小项目，但要写好的话，代码量和架构也是有一定要求的。 qwhadvertisingpage.h #ifndef QWHADVERTISINGPAGE_H #define QWHADVERTISINGPAGE_H #include <QWidget> #include <QPushButton> #include <QPaintEv
qt 轮播图 实现，美化版本
PHP代码的博客
03-23 543
今天文章讲述的是如何用Qt实现图片轮播的效果，其实我们经常在网页中看到各种广告就是使用了图片轮播，实现小区域内嵌入多个广告的效果。其实实现起来也不难，只要使用Qt的动画类即可实现类似的效果。之前做了一个，效果不佳，今天重新写了一遍，实现了类似上面第一种的效果，通过Qt的动画类修改透明度来实现上下两张图片的切换效果，下面上效果图。
qt QLabel 实现图片轮播效果
03-10
继承QLabel控件实现了图片轮播效果 1.自定义添加图片与图片描述； 2.支持2S自动轮播 3.支持鼠标点击左下方索引按钮定位图片
Qt实现滚动轮播图广告
11-23
Qt轮播图实现，在一个机会下，面试官让我写一个Qt轮播图功能的项目，所以我就把它传到这供大家参考，我认为功能还是比较全的，笔者把一些功能都是写活的，并且有非常详实的注释，比较适合初学者对信号槽机制的掌握，也方便大家使用。我个人认为Qt的轮播图确实很考验一个开发者使用信号槽机制的使用情况。
qt程序实现多个图片连续显示效果像动画一样
热门推荐
luckywang1103的专栏
12-14 2万+
qt学习也快一个月了，最近想做一个有趣的程序。效果是这样的：通过定时器连续显示几幅图片，串联起来看像是动的一样，我在网上找了几幅关于小鸡破壳而出那个有趣的场景，然后通过程序实现效果就是小鸡破壳而出。 五张图片如下： 程序主要代码如下： #include "shapewidget.h" #include #include #include #include
QT实现图片轮播
08-19
主要介绍了QT实现图片轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
qt 实现轮播图
比卡丘不皮的博客
10-29 2652
这个是为了编写我网易云项目中轮播图的效果，目前移动动画有点问题，后期把功能给加上。 采用了QGraphicsScene 、QGraphicsView、QGraphicsPixmapItem的方式，参考了网上博主 https://blog.csdn.net/h391998495979/article/details/101868838 然后自己采用了map 关联了button 与 图片的连接。 主要代码： #include "picturewidget.h" #include "ui_pi..
qt 动画 顺序 轮播图轮播图
小狸猫扑通扑通的博客
07-09 1186
​来逛逛hexo呗 Show time! 简单来说，就是一个轮播图。 切换的时候是有动画的。 点击下面的按钮可以切换动画。 图片可以是很多张很多张的，但显示在窗口上的只有三张，但它们的顺序是不会变的。 如果能直接有qml上面的pathview的组件能直接使用那就更好了，就不能自己敲widget了。 ​ 整体流程 首先，大概是这么一个窗口： 其中，灰色部分就是整个widget的大小，就是说leftprepare和rightprepare是在widget外的，就是准备着的。 左移和右移差不多，那只要明白左移
Qt之实现图片轮播效果
hw5230的博客
05-26 832
今天文章讲述的是如何用Qt实现图片轮播的效果，其实我们经常在网页中看到各种广告就是使用了图片轮播，实现小区域内嵌入多个广告的效果。下面是CSDN页面中两种常见的图片轮播效果。基本上就是定时自动切换广告页面，或者手动点击选择切换页面。其实实现起来也不难，只要使用Qt的动画类即可实现类似的效果。之前做了一个，效果不佳，今天重新写了一遍，实现了类似上面第一种的效果，通过Qt的动画类修改透明度来实现上下两张图片的切换效果，下面上效果图。
Qt实现转动轮播图
01-19
Qt轮播图的实现代码，供大家参考，具体内容如下 qt轮播图简单的实现，功能会在后面完善 效果图： 这里我是用了QGraphicsScene+QGraphicsView+QGraphicsObject，其中对QGraphicsView和QGraphicsObject进行继承派生类功能进行了添加。时间有限，直接贴上关键代码部分供大家参考。 //pictrueitem.h #ifndef PICTRUEITEM_H #define PICTRUEITEM_H #include <QGraphicsPixmapItem> #include <QGraphicsItem> #include <QGr
qt实现QStackedWidget界面左右滑动示例
02-24
资源文章介绍地址:https://www.cnblogs.com/lifexy/p/14260022.html 通过重写QStackedWidget类,来实现模拟手机home界面的左右滑动效果. 支持快滑,慢滑（如果是慢滑,则根据当前滑到的界面处于哪一页占比更多,则就跳到哪里.），同时支持边缘滑动检测（已在最边缘时,则滑动速率减慢,告诉用户已到边缘）.
GraphicsPictrue（Qt轮播图）.rar
07-09
目前未完善部分：下方选择图标时可能会出现不对应的情况。 利用到了QGraphicsScene+QGraphicsView+QGraphicsObject，可供Qt 2D图形编程学习参考。
QT-qml轮播图自动循环
03-23
通过Quick qml自带list实现类似京东电商移动app自动循环滚动图展示效果。也就是轮播图，可自动循环滚动，也可手动滑动循环展示。
基于QT+C++实现的界面轮播图效果+源码
最新发布
05-01
该项目实现了界面轮播图的效果，包含如下特点： 左右轮播 鼠标悬浮切换，无需点击 自动定时轮播 自动裁剪和缩放不同尺寸图片 任意添加、插入、删除 单击事件，支持索引和自定义文本 界面美观，圆角、阴影、卡片内...
原生JS实现自动无缝切换轮播图(可鼠标拖动)
莫小猪的菜鸟进阶路
08-17 6295
^ _ ^ 最近参加了一个免费的华为在线课程，上面一个作业是用原生js实现轮播图。练手的同时发现工作中框架用的多。原生的都不如以前那么熟练了。特此写这篇文章记录一下。希望能帮助到一些新手盆友。一起学习吧。 目录功能需求实现思路html & CSS结构分析JS逻辑实现知识点小结 功能需求 功能上要实现以下4个需求： 自动无缝切换图片 鼠标左右拖动切换图片 点击小点切换对应图片 浏览器窗口尺寸改变不影响以上功能 实现思路 html & CSS结构分析 JS逻辑实现 知识
森林笔记：Qt线程及其应用：实现图片轮播
laried的博客
07-09 468
1
qt子线程实现轮播图
09-16
在Qt中，我们可以通过使用子线程实现轮播图功能。首先，我们创建一个继承自QObject的类，用于在子线程中执行轮播图的功能。 在这个子线程类中，我们可以定义一个槽函数，用于进行轮播图的操作。在这个槽函数中，我们可以使用Qt提供的QTimer类来实现定时切换图片的功能。通过设置定时器的时间间隔和绑定相应的信号与槽函数，我们可以实现自动切换图片的效果。 接下来，在主线程中，我们需要创建一个QThread对象，并将上面创建的子线程类对象移动到这个子线程中。然后，我们可以调用QThread对象的start()函数来启动子线程。 为了在主线程中继续处理其他任务，我们可以使用Qt的事件循环机制。在主线程中，我们可以使用QEventLoop类来创建一个事件循环，并调用exec()函数来开始事件循环。这样，主线程就可以继续处理其他任务，同时子线程中的轮播图功能也可以实现。 在子线程中，当我们收到定时器的信号时，就可以执行轮播图的操作。我们可以使用Qt提供的信号和槽机制，将轮播图的图片切换操作与主线程中的UI控件绑定起来，从而实现图片的更新和显示。 总之，通过使用Qt的子线程和事件循环机制，我们可以实现轮播图的功能，并且不阻塞主线程的运行。这样可以提高程序的响应性和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孤生i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值