vue 中鼠标移入停止轮播移出开始轮播（swiper5）

Posted 2023-04-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 中鼠标移入停止轮播移出开始轮播（swiper5）相关的知识，希望对你有一定的参考价值。

参考技术A <template>

<div class="swiper">

<el-row :gutter="10" class="row-col">

<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="col-info">

/* 添加移入移出的事件 */

<swiper

:options="swiperOptionInfo"

ref="mySwipers"

class="info-swiper"

@mouseenter.native="mouseEnter"

@mouseleave.native="mouseLeave"

>

<swiper-slide

v-for="item in datas"

:key="item.id"

class="swiper-item"

>

<img :src="item.img" alt="" class="img" />

</swiper-slide>



<div

slot="button-prev"

class="swiper-button-prev hidden-sm-and-down"

></div>

<div

slot="button-next"

class="swiper-button-next hidden-sm-and-down"

></div>

</swiper>

</el-col>

</el-row>

</div>

</template>

export default

name: "Swipers",

components: ,

props: ["datas"],

data()

return

swiperOptionInfo:

loop: true,

autoplay:

delay: 6000,

stopOnLastSlide: false,

disableOnInteraction: true,

,

// pagination:

// el: '.swiper-pagination',

// clickable: true,

// ,

navigation:

nextEl: ".swiper-button-next",

prevEl: ".swiper-button-prev",

,

,

;

,

methods:

mouseEnter()

this.$refs.mySwipers.$swiper.autoplay.stop();

,

mouseLeave()

this.$refs.mySwipers.$swiper.autoplay.start();

,

,

;

.swiper

margin-top: 100px;

.row-col

max-height: 650px;

.col-info

height: 100%;

.info-swiper

height: 100%;

.swiper-item

width: 100%;

max-height: 550px;

// cursor: pointer;

.img

width: 100%;

height: 100%;

鼠标移入视频播放，鼠标移出播放停止，恢复到原来状态

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移入视频播放，鼠标移出播放停止，恢复到原来状态</title>
    <link rel="shortcut icon" href="http://files.cnblogs.com/files/heyiming/logo.ico" />
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .video{
            width: 200px;
            height: auto;
            margin: 0 auto;
        }
        #video{
            width: 200px;
            height: auto;
        }
    </style>
</head>
<body>
        <div class="video">
            <div class="img"  onmouseover="come()"><img src="demo.png" alt=""/></div>
            <a href="此处填写你想要跳转的地址">
                 <video id="video"  style="display: none"  src="videos/demo.mp4" autoplay="autoplay"   onmouseout="go()" ></video>
            </a>
        </div>
</body>
</html>
<script src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<script>
    myVid=document.getElementById("video");
    myVid.muted=true;
    function come() {
        $("#video").show();
        $(".img").hide();
        $("#video").load();//执行一次加载一次，从头开始播放
    }
    function go() {
        $(".img").show();
        $("#video").hide();
    }
</script>

以上是关于vue 中鼠标移入停止轮播移出开始轮播（swiper5）的主要内容，如果未能解决你的问题，请参考以下文章

jQuery链式调用、鼠标移入移出、轮播、键盘事件

JavaScript--轮播图_带计时器

轮播图（淡入淡出切换）

鼠标移入时候clearInterval(),后，鼠标移出时候setInterval(),为啥越来越快？

用js写的简单轮播特效

vue 中 鼠标移入停止轮播 移出开始轮播 （swiper5）

鼠标移入视频播放，鼠标移出播放停止，恢复到原来状态

vue 中鼠标移入停止轮播移出开始轮播（swiper5）