【第五篇】Qt学习与使用---自定义的图片轮播类（滚动播放图片）

1、目标

编写一个类，可以展示几张图片。类似于现在流行的视频播放器的首页中出现的滚动展示的控件。

2、 具体要求

（1）一次性展示三张图片，左中右。中间的图片至于顶部，旁边的图片被覆盖，只露出一部分。

（2） 切换图片的时候，呈现动态效果，需要有一个移动的过程。

（3）有自动轮播和手动切换的功能。

3、编程思路

（1）需要用到两个定时器，一个做 自动轮播定时，一个做移动过程定时。

（2）只考虑超过三张图片的情况（少于三张图片不使用该程序），需要使用容器存放图片地址。

4、直接看代码

文件：mywidget.h文件

#ifndef MYWIDGET_H
#define MYWIDGET_H

#include <QWidget>
#include <QLabel>
#include <QVector>
#include <QTimer>
#include <QPushButton>

class MyWidget : public QWidget
{
    Q_OBJECT
public:
    int flag_ING=0;         //正在移动的标记（起到自锁的功能）
    int flag_leftright=1;   //控制图片移动的方向（向左为正，next）
    int nowchoose=0;        //记录图片编号
    int X1=0,X2=0,X3=0,YYY=0,DX=0;//三张图片的固定位置
    int thisWidth;              //屏宽
    int thisHeight;             //屏高
    QWidget* W1,*W2,*W3;        //三张放图片的面板
    QTimer* timer;              //动作定时器
    QTimer* OneTimeTimer;       //轮播定时器
    explicit MyWidget(QWidget *parent = 0, int WWW=0, int HHH=0);
    QVector<QString> Vector_pics;//图片容器
    void init_Things();
    void init_btn();
    QPushButton* btn_next;
    QPushButton* btn_before;
    void init_lb();
    QLabel* lb1;                //图片载体
    QLabel* lb2;
    QLabel* lb3;
    QLabel* lb_backgroundcolor;//控件背景色控制
signals:

public slots:
    void slot_timerout();
    void slot_timeroutOne();
    void slot_next();
    void slot_before();
};

#endif // MYWIDGET_H

文件：mywidget.cpp文件

#include "mywidget.h"
#include <QDebug>
#include <QHBoxLayout>
#define Kshine 1.5 //大小(1/kshine* 屏幕)
#define KshineSpeed 3 //移动速度
MyWidget::MyWidget(QWidget *parent, int WWW, int HHH) : QWidget(parent)
{

    if(WWW&&HHH)
    {
        //创建时指定大小
        thisWidth=WWW;
        thisHeight=HHH;

    }
    else
    {
        //默认子页面大小
        thisWidth=1920;
        thisHeight=1080;
        this->setStyleSheet("background-color:yellow;");
    }
    this->setFixedSize(thisWidth,thisHeight/Kshine+thisHeight*Kshine/36+80);
    this->setAutoFillBackground(true);
    lb_backgroundcolor =new QLabel(this);
    lb_backgroundcolor->setFixedSize(thisWidth,thisHeight/Kshine+thisHeight*Kshine/36+80);
    lb_backgroundcolor->setStyleSheet("background-color:rgb(50,50,50);");
    qDebug()<<"页面：概览  尺寸："<<width()<<height();

    OneTimeTimer = new QTimer(this);
    OneTimeTimer->setInterval(3000);
    connect(OneTimeTimer,SIGNAL(timeout()),this,SLOT(slot_timeroutOne()));
    OneTimeTimer->start();
    timer = new QTimer(this);
    timer->setInterval(1);
    connect(timer,SIGNAL(timeout()),this,SLOT(slot_timerout()));
    Vector_pics.append(":/picture/test/1.png");
    Vector_pics.append(":/picture/test/2.png");
    Vector_pics.append(":/picture/test/3.png");
    Vector_pics.append(":/picture/test/4.png");
    Vector_pics.append(":/picture/test/5.png");
    Vector_pics.append(":/picture/login/loginbackground.jpg");
    init_Things();
    init_lb();
    init_btn();
    show();
}

void MyWidget::init_Things()
{
    nowchoose=0;
    X1=thisWidth*(Kshine-2)/Kshine/2;
    X2=thisWidth*(Kshine-1)/Kshine/2;
    X3=thisWidth/2;
    qDebug()<<X1<<X2<<X3;
    YYY=thisHeight*Kshine/36;

    W1 =new QWidget(this);
    W2 =new QWidget(this);
    W3 =new QWidget(this);
    W1->setFixedSize(thisWidth/Kshine,thisHeight/Kshine);
    W2->setFixedSize(thisWidth/Kshine,thisHeight/Kshine);
    W3->setFixedSize(thisWidth/Kshine,thisHeight/Kshine);
    W1->setStyleSheet("background-color:red;");
    W2->setStyleSheet("background-color:blue;");
    W3->setStyleSheet("background-color:green;");
    W1->move(X1,YYY);W2->move(X2,YYY);W3->move(X3,YYY);
    W2->raise();
    //    Vector_pics.append("123");
    //    Vector_pics.append("123");
    //    Vector_pics.append("123");
    //    Vector_pics.append("123");
    //    Vector_pics.append("123");

}

void MyWidget::init_btn()
{
    btn_next =new QPushButton(this);btn_next->setText("=>");
    connect(btn_next,SIGNAL(clicked(bool)),this,SLOT(slot_next()));
    btn_before =new QPushButton(this);btn_before->setText("<=");
    connect(btn_before,SIGNAL(clicked(bool)),this,SLOT(slot_before()));
    QHBoxLayout* ly_H_btn=new QHBoxLayout();
    ly_H_btn->addStretch();
    ly_H_btn->addWidget(btn_before);
    ly_H_btn->addSpacing(30);
    ly_H_btn->addWidget(btn_next);
    ly_H_btn->addStretch();
    ly_H_btn->setGeometry(QRect(0,YYY+thisHeight/Kshine+20,thisWidth,40));
}

void MyWidget::init_lb()
{

    lb1 = new QLabel(W1);
    lb2 = new QLabel(W2);
    lb3 = new QLabel(W3);
    lb1->setFixedSize(thisWidth/Kshine,thisHeight/Kshine);
    lb2->setFixedSize(thisWidth/Kshine,thisHeight/Kshine);
    lb3->setFixedSize(thisWidth/Kshine,thisHeight/Kshine);

    QPixmap pixmap1,pixmap2,pixmap3;
    pixmap1.load(Vector_pics.last());qDebug()<<Vector_pics.last();
    pixmap1.scaled(lb1->size(), Qt::IgnoreAspectRatio);
    lb1->setScaledContents(true);
    lb1->setPixmap(pixmap1);

    pixmap2.load(Vector_pics.first());qDebug()<<Vector_pics.first();
    pixmap2.scaled(lb2->size(), Qt::IgnoreAspectRatio);
    lb2->setScaledContents(true);
    lb2->setPixmap(pixmap2);

    pixmap3.load(Vector_pics[1]);qDebug()<<Vector_pics[1];
    pixmap3.scaled(lb3->size(), Qt::IgnoreAspectRatio);
    lb3->setScaledContents(true);
    lb3->setPixmap(pixmap3);
}

void MyWidget::slot_timerout()
{
    if(flag_leftright)
    {
        //左移
        if(W2->x()>X1)//先移动
        {
            W2->move(W2->x()-KshineSpeed,YYY);
            //W1->move(W1->x()+2*KshineSpeed,YYY);
            if(W2->x() <= X1)
            {
                W3->raise();
                QPixmap pixmap1;
                int num =(nowchoose+2)%Vector_pics.length();
                pixmap1.load(Vector_pics[num]);
                pixmap1.scaled(lb1->size(), Qt::IgnoreAspectRatio);
                lb1->setPixmap(pixmap1);
                W1->move(X3,YYY);//直接过来
            }
        }
        if(W2->x()  <=  X1  &&   W3->x()    >   X2)
        {
            W3->move(W3->x()-KshineSpeed,YYY);
            if(W3->x() <= X2)
            {
                timer->stop();
                QWidget* temp=W1;
                W1=W2;
                W2=W3;
                W3=temp;
                QLabel* tb=lb1;
                lb1=lb2;
                lb2=lb3;
                lb3=tb;
                flag_ING=0;
            }
        }
    }
    else
    {
        //右移
        if(W2->x()<X3)//中间先移动
        {
            W2->move(W2->x()+KshineSpeed,YYY);
            //W3->move(W3->x()-2*KshineSpeed,YYY);
            if(W2->x() >= X3)
            {
                W1->raise();
                QPixmap pixmap3;
                int num =(nowchoose-2)%Vector_pics.length();
                if(num<0)num+=Vector_pics.length();
                pixmap3.load(Vector_pics[num]);
                pixmap3.scaled(lb3->size(), Qt::IgnoreAspectRatio);
                lb3->setPixmap(pixmap3);
                W3->move(X1,YYY);//直接过来
            }
        }
        if(W2->x()>=X3  &&   W1->x()    <   X2)//2向右移动完，1未移动完
        {
            W1->move(W1->x()+KshineSpeed,YYY);
            if(W1->x() >= X2)
            {
                timer->stop();
                QWidget* temp=W3;
                W3=W2;
                W2=W1;
                W1=temp;
                QLabel* tb=lb3;
                lb3=lb2;
                lb2=lb1;
                lb1=tb;
                flag_ING=0;
            }
        }




    }
}

void MyWidget::slot_timeroutOne()
{
    //左移
    if(flag_ING)return;
    flag_leftright=1;
    nowchoose++;
    if(nowchoose>=Vector_pics.length())nowchoose=0;
    W1->lower();
    lb_backgroundcolor->lower();
    timer->start();
    flag_ING=1;
}

void MyWidget::slot_next()
{
    //左移
    OneTimeTimer->stop();
    if(flag_ING)return;
    flag_leftright=1;
    nowchoose++;
    if(nowchoose>=Vector_pics.length())nowchoose=0;
    W1->lower();
    lb_backgroundcolor->lower();
    timer->start();
    flag_ING=1;
}

void MyWidget::slot_before()
{
    //右移
    OneTimeTimer->stop();
    if(flag_ING)return;
    flag_leftright=0;
    nowchoose--;
    if(nowchoose<0)nowchoose=Vector_pics.length()-1;
    W3->lower();
    lb_backgroundcolor->lower();
    timer->start();
    flag_ING=1;
}

5、效果展示

6、其他

欢迎提问和交流。另外如果想在 左右两边的图片上增加点击切换的效果，需要在控件的外面添加。通过信号槽的机制控制。