vue+ElementUi+iframe实现轮播不同的网站

更新时间：2024年02月11日 09:12:07 作者：JPQLGZPW

需要实现一个轮播图,轮播内容是不同的网站,并实现鼠标滑动时停止轮播,当鼠标10秒内不动时继续轮播,所以本文给大家介绍了用vue+ElementUi+iframe实现轮播不同的网站,需要的朋友可以参考下

工作需求：需要实现一个轮播图，轮播内容是不同的网站，并实现鼠标滑动时停止轮播，当鼠标10秒内不动时继续轮播

第一步：实现不同的网页嵌入同一个页面

应用的是iframe这个技术

代码如下：

    <iframe
            id="huoduan_frame"
            frameborder="0"
            scrolling="auto"
            name="main"
            :src="http://baidu" src：指定内联网页的地址。
            style="
              height: 100%;
              visibility: inherit;
              width: 100%;
              z-index: 1;
              overflow: visible;
            "
          >
          </iframe>

把需要内联的网页地址写进src就行，iframe具体的使用请查看下面大佬的文档

iframe的基本介绍与使用

第二步：使用elementui的<el-carousel></el-carousel>轮播组件搭配iframe实现轮播

代码如下：

   <el-carousel
        :interval="15000"
        arrow="always"
        height="100vh"
        width="100%"
        ref="carousel"
        :autoplay="autoplay"
        @mousemove.native="delHandleMouseEnter"
      >
        <el-carousel-item v-for="(item,i) in list" :key="i">
          <iframe
            id="huoduan_frame"
            frameborder="0"
            scrolling="auto"
            name="main"
            :src="item"
            style="
              height: 100%;
              visibility: inherit;
              width: 100%;
              z-index: 1;
              overflow: visible;
            "
          >
          </iframe>
        </el-carousel-item>
      </el-carousel>

<el-carousel></el-carousel>组件的具体使用可以查看elementui官方文档

Element - The world's most popular Vue UI framework

第三步：上面已经实现可以轮播内联网页了，但是还需要监听鼠标移动事件来实现停止轮播

el-carousel组件是自带一个悬浮页面停止轮播的功能的，因此需要先重置鼠标的悬浮事件

   mounted() {
          this.$refs.carousel.handleMouseEnter = () => {} /* 重置鼠标悬浮事件 */
        
        },

然后绑定鼠标移动事件，设置定时器，每隔一段时间判断鼠标是否移动

全部代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" 
    />
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-carousel
        :interval="15000"
        arrow="always"
        height="100vh"
        width="100%"
        ref="carousel"
        :autoplay="autoplay"
        @mousemove.native="delHandleMouseEnter"
      >
        <el-carousel-item v-for="(item,i) in list" :key="i">
          <iframe
            id="huoduan_frame"
            frameborder="0"
            scrolling="auto"
            name="main"
            :src="item"
            style="
              height: 100%;
              visibility: inherit;
              width: 100%;
              z-index: 1;
              overflow: visible;
            "
          >
          </iframe>
        </el-carousel-item>
      </el-carousel>
    </div>
 
    <script>
      new Vue({
        el: '#app',
        data: function () {
          return {
            autoplay: true,
            oldTime: new Date().getTime(),
            newTime: new Date().getTime(),
            outTime: 120000, //设置超时时间： 8分钟,
            timer: null,
            list: [
              // /* 网页存放地址 */
,
            ],
          }
        },
        mounted() {
          // this.$refs.carousel.handleMouseEnter = () => {} /* 重置鼠标悬浮事件 */
          // setInterval(() => {
          //   this.OutTime() /* 每五秒判断一次鼠标是否移动 */
          // }, 5000)
        },
        created() {},
        methods: {
          // 鼠标移动事件
          delHandleMouseEnter() {
            // this.autoplay = false
            // this.$refs.carousel.handleMouseEnter =
            //   () => {} /* 重置鼠标悬浮事件 */
            // this.oldTime = new Date().getTime() /* 鼠标移动重新计算时间 */
         
          },
          OutTime() {
            // clearInterval(this.timer);
            this.newTime = new Date().getTime() //更新未进行操作的当前时间
           
            //判断是否超时不操作
            if (this.newTime - this.oldTime > this.outTime) {
              //超时后执行的操作
              this.autoplay = true
            }
          },
        },
      })
    </script>
  </body>
</html>

完结撒花~~

以上就是vue+ElementUi+iframe实现轮播不同的网站的详细内容，更多关于vue+ElementUi+iframe轮播网站的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue项目下常用的npm命令详解
文章介绍了Vue项目中常用的npm命令：npm run serve启动、npm install安装依赖、npm run build构建,运行前后文件体积变化显著,需HTTP服务器运行,npm工具不仅限于Vue,还广泛应用于其他场景
2025-08-08
vue实现表单验证功能
这篇文章主要为大家详细介绍了vue实现表单验证功能，基于NUXT的validate方法实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue2项目解决IE、360浏览器兼容问题的办法
虽然已经摈弃ie的使用,但是在现阶段还是在某些场景下需要用到ie,这篇文章主要给大家介绍了关于vue2项目解决IE、360浏览器兼容问题的办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-09-09
vue中音频wavesurfer.js的使用方法
这篇文章主要为大家详细介绍了vue中音频wavesurfer.js的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
vue中el-select中多选回显数据后没法重新选择和更改的解决
本文主要介绍了vue中el-select中多选回显数据后没法重新选择和更改解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-01-01
vue内置组件keep-alive事件动态缓存实例
这篇文章主要介绍了vue内置组件keep-alive事件动态缓存实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue.js中数据绑定的语法教程
Vue框架很核心的功能就是双向的数据绑定。下面这篇文章主要给大家介绍了关于Vue.js中数据绑定的语法教程，文中通过示例代码介绍的非常详细，相信对大家具有一的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
vue中可编辑树状表格的实现代码
这篇文章主要介绍了vue中可编辑树状表格的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)
使用vue也好有一段时间了,也算对其双向绑定原理也有了解个大概,这篇文章主要给大家介绍了关于vue MVVM双向绑定(数据劫持+发布者-订阅者模式)的相关资料,需要的朋友可以参考下
2022-03-03
vue实现el-select的change事件过程
这篇文章主要介绍了vue实现el-select的change事件过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04

vue+ElementUi+iframe实现轮播不同的网站

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具