【vue-7】图片轮播案例

WXG1011

已于 2024-06-12 14:27:06 修改

阅读量314

点赞数 1

分类专栏： vue 文章标签：前端 javascript 开发语言

于 2024-06-03 23:10:52 首次发布

本文链接：https://blog.csdn.net/WXG1011/article/details/139426571

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实现功能：

1、通过button实现图片轮训播放；

2、通过标签列表项实现图片的播放；

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="vue.global.js"></script> -->
    
</head>
<body>
    <div id="app">
        {{number}}<br>
        <!-- <img src="/image/test2.jpg"><br> -->
        <img :src=`/image/${number}.jpg` style="width: 300px; height: 200px;"><br>

        <button @click="prev">上一张</button>
        <button @click="next">下一张</button><br>
        <ul>
            <li v-for="value in 3">
                <a href="#" @click="jump(value)">{{value}}</a>
            </li>
            
        </ul>
    </div>
    <script type="module">
        import {createApp, ref} from './vue.esm-browser.js'
        // const {createApp, reactive} = Vue
        createApp({
            // setup选项，用于设置响应式数据和方法等
            setup(){ 
                const number = ref(1)
                      
                const prev = () =>{
                    number.value--
                    if (number.value == 0){
                        number.value = 3
                    }
                }

                const next = () =>{
                    number.value++
                    if (number.value == 4){
                        number.value = 1
                    }
                }

                const jump = (value) =>{
                    number.value = value
                }
                return{
                    number,
                    prev,
                    next, 
                    jump   
                }
            }
        }).mount("#app")
        // mount为挂载
    </script>
</body>
</html>