|
发表于 2020-4-2 13:08:58
|
显示全部楼层
需要设置为原始字符串,这样试试:
- # -*- coding: utf-8 -*-
- # Form implementation generated from reading ui file 'Formuntitled.ui'
- #
- # Created by: PyQt5 UI code generator 5.11.3
- #
- # WARNING! All changes made in this file will be lost!
- import sys
- from PyQt5.QtCore import *
- from PyQt5.QtGui import *
- from PyQt5.QtWidgets import *
- from PyQt5.QtWebEngineWidgets import *
- from PyQt5 import QtCore, QtGui, QtWidgets
- from PyQt5.QtGui import QPalette, QBrush, QPixmap
- from PyQt5.QtWidgets import *
- from PyQt5.QtCore import *
- from PyQt5.QtGui import *
- import sys
- class MainWindow(QMainWindow):
- def __init__(self):
- super(MainWindow, self).__init__()
- self.setWindowTitle('百度') # 窗口标题
- self.setGeometry(5, 30, 1355, 730) # 窗口的大小和位置设置
- self.browser = QWebEngineView()
- # 加载html代码(这里注意html代码是用三个单引号包围起来的)
- self.browser.setHtml(r'''<!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
- <meta name='apple-mobile-web-app-capable' content='yes' />
- <meta name="format-detection" content="telephone=no" />
- <meta http-equiv='Content-Type' content='textml;charset=UTF-8' />
- <title>移动端</title>
- <style>
- *{
- padding: 0;
- margin: 0;
- }
- #slideshow{
- width: 160px;
- height: 600px;
- margin: 0 auto; /*设置在页面水平居中*/
- overflow: hidden;
- position: relative;
- }
- #slideshow img{
- width: 160px;
- position: absolute; /*图片采取绝对定位,均位于左上角,重叠在一起*/
- top: 0;
- left: 0;
- opacity: 0; /*初始不透明度为0,图片都看不见*/
- transition: opacity 1s linear; /*--重点--定义一个关于透明度的transition*/
- }
- #slideshow img.active{
- opacity: 1; /*有active类的图片不透明度为1,即显示图片*/
- }
- </style>
- </head>
- <body>
- <div id="slideshow">
- <!-- 插入轮播的图片们 -->
- <img class="active" src="这里插入http的网络图片就可以显示成功但本地图片会报错" />
- <img src="C:\Users\Desktop\grgs\WH.jpg" />
- <img src="img/1 (3).jpg" />
- <img src="img/1 (4).jpg" />
- <img src="img/1 (5).jpg" />
- <img src="img/1 (6).jpg" />
- <img src="img/1 (7).jpg" />
- <img src="img/1 (8).jpg" />
- <img src="img/1 (9).jpg" />
- <img src="img/1 (10).jpg" />
- <img src="img/1 (11).jpg" />
- </div>
- <script>
- //---------主角:轮播图函数-------------
- function slideshow() {
- var slideshow=document.getElementById("slideshow"),
- imgs=slideshow.getElementsByTagName("img"), //得到图片们
- current=0; //current为当前活跃的图片编号
- function slideOff() {
- imgs[current].className=""; //图片淡出
- }
- function slideOn() {
- imgs[current].className="active"; //图片淡入
- }
- function changeSlide() { //切换图片的函数
- slideOff();
- current++; //自增1
- if(current>=imgs.length) current=0;
- slideOn();
- }
- //每2s调用changeSlide函数进行图片轮播
- var slideon=setInterval(changeSlide,2000);
- slideshow.οnmοuseοver=function () {
- clearInterval(slideon); //当鼠标移入时清除轮播事件
- }
- slideshow.οnmοuseοut=function () {
- slideon=setInterval(changeSlide,1500); //当鼠标移出时重新开始轮播事件
- }
- }
- slideshow();
- </script>
- </body>
- </html>
- ''')
- self.setCentralWidget(self.browser)
- if __name__ == '__main__':
- app = QApplication(sys.argv)
- win = MainWindow()
- win.show()
- app.exit(app.exec_())
复制代码 |
|