tkinter点击按钮实现图片的切换

tkinter是python的标准Tk GUI工具包的接口,在windows下如果你安装的python3,那在安装python的时候,就已经自动安装了tkinter了

如果是在linux系统中,则不会自动安装tkinter,需要通过

sudo apt-get install python-tk

手动安装

 

首先先介绍一下,tkinter本身只支持gif等少数几个图片格式,如果图片并不复杂,建议直接右击图片,进入编辑,在画图界面将图片另存为gif格式就可以使用了(连png和jpeg都不支持。。。真的有点魔幻)

 

具体的编程操作

如果你尝试直接重写设置图片的有关代码会出问题

比如

import tkinter as tk
top = tk.Tk()

top.title("划水摸鱼")  # 设置窗口
width = 260
height = 500
top.geometry(f'{width}x{height}')  # 设置窗口大小

img_gif = tk.PhotoImage(file='./动作/问号.gif')  # 设置图片
label_img = tk.Label(top, image=img_gif)  # 设置预显示图片
label_img.place(x=30, y=120)

def change_img():   # 设置按钮事件
    img_gif0 = tk.PhotoImage(file='./动作/走.gif')
    label_img.configure(image=img_gif0) 
    label_img.place(x=30, y=120)

button = tk.Button(top, text='Prediction', command=change_img)  # 设置按钮
button.place(x=90, y=330)

top.mainloop()

在这里我直接重写了label_img,但是实际效果是

问号.gif能够正常显示,

点击按钮后,走.gif无法显示

 

实际切换图片,应该用configure实现

正确的操作如下

import tkinter as tk
top = tk.Tk()

top.title("划水摸鱼")  # 设置窗口
width = 260
height = 500
top.geometry(f'{width}x{height}')  # 设置窗口大小

img_gif = tk.PhotoImage(file='./动作/问号.gif')  # 设置图片
img_gif0 = tk.PhotoImage(file='./动作/走.gif')

label_img = tk.Label(top, image=img_gif)  # 设置预显示图片
label_img.place(x=30, y=120)

def change_img():
    label_img.configure(image=img_gif0)  # 设置按钮事件

button = tk.Button(top, text='Prediction', command=change_img)  # 设置按钮
button.place(x=90, y=330)

top.mainloop()

具体效果

点击按钮后

 

 

  • 13
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
要通过JavaScript点击按钮切换图片,可以按照以下步骤进行操作: 1. 首先,获取按钮对象和img标签的属性。可以使用`getElementById`方法获取按钮对象,使用`getElementsByTagName`方法获取img标签对象。 2. 接着,通过JavaScript获取到img标签中的src属性,并对其进行修改。可以使用`getAttribute`方法获取src属性的值,使用`setAttribute`方法修改src属性的值。 3. 然后,为两个按钮添加单击响应函数。可以使用`addEventListener`方法为按钮对象添加单击事件监听器。 4. 最后,在响应函数中修改img标签中的src属性,实现图片切换。可以使用条件判断语句和递增/递减操作来修改index变量的值,并将对应索引的图片路径赋给img标签的src属性。 示例代码如下: ```javascript // 获取按钮对象 var last = document.getElementById("last"); var next = document.getElementById("next"); // 获取img标签对象 var img = document.getElementsByTagName("img")[0]; // 创建一个数组来保存图片的路径 var imgArr = ["../img/js_image/复联一.webp","../img/js_image/复联二.webp","../img/js_image/复联三.webp","../img/js_image/复联四.webp","../img/js_image/复联五.webp","../img/js_image/复联六.webp",]; // 创建一个变量存储当前正在显示的图片的索引 var index = 0; // 设置按钮的单击事件监听器 last.addEventListener("click", function() { if (index > 0) { index--; } img.setAttribute("src", imgArr[index]); }); next.addEventListener("click", function() { if (index < imgArr.length - 1) { index++; } img.setAttribute("src", imgArr[index]); }); ``` 使用以上代码,点击"上一张"按钮可以切换到前一张图片,点击"下一张"按钮可以切换到后一张图片

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值