Vue 实现 transform 轮播图

最新推荐文章于 2024-07-02 16:56:38 发布

weibaobao1314

最新推荐文章于 2024-07-02 16:56:38 发布

阅读量819

点赞数

本文链接：https://blog.csdn.net/weibaobao1314/article/details/108857679

版权

本文介绍了如何使用Vue和CSS的transform: translateX(100%)属性创建轮播图效果。通过结合Vue的事件监听器v-on:mouseover和v-on:mouseout来控制轮播图的暂停和继续播放，并且展示了如何将线上图片数组应用于实际的Vue实例中。

摘要由CSDN通过智能技术生成

Vue 实现 transform 轮播图

这个呢是css样式利用 transform: translateX(100%); 属性实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
   
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: black;
        }
        html{
   
            height: 100%;
        }
        body{
   
            height: 100%;
            display: flex;
            justify-content: center;
        }
        .app{
   
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
        }
        img{
   
            width: 500px;
            height: 300px;
        }
        li{
   
            width: 500px;
            height: 300px;
            border: 5px solid white;
            color: white;
            position: absolute;
        }
        ul{
   
            width: 510px;
            display: flex;
            justify-content: center;
            align-items: center;