<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3实现简单幻灯效果</title>
</head>
<style>

.slider img{
    width: 600px;
    height: 300px;
    border-radius: 10px;
}

.btns{
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.btns span{
    padding:3px 8px;
    cursor:pointer;
    background: #ccc;
    margin:5px;
    border-radius: 3px;
    font-size: 1rem;
}

.slider{
    padding: 0px;
    margin:0 auto;
    width:600px;
}

</style>
<body>
    <div id="app">

        <div class="slider">
        <div><a :href="now.href"><img :src="now.url" :alt="now.title"></a></div>

        <div class="btns">
            <span @click="prev(index)">上一张</span>
        <template v-for="(value,index) in imgs">
            <span  @click="jump(index)">{{index+1}}</span>
        </template>
            <span @click="next(index)">下一张</span>
        </div>
        </div>

    </div>

    <script type="module" >
        import {createApp,reactive,ref,onMounted} from './vue.esm-browser.js'

        createApp({

            setup(){

                let imgs = [
                    {url:'./image/1.jpg',title:'第一张',href:'http://www.baidu.com'},
                    {url:'./image/2.jpg',title:'第二张',href:'http://www.bing.com'},
                    {url:'./image/3.jpg',title:'第三张',href:'http://www.sougou.com'},
                    {url:'./image/4.jpg',title:'第四张',href:'http://www.so.com'},
                    {url:'./image/6.jpg',title:'第五张',href:'http://www.qq.com'}
                ]

                let now = reactive(imgs[0])

                let index_num = ref(0)

                let show = true


                let jump = (index)=>{

                    
                    now.href = imgs[index].href
                    now.url = imgs[index].url
                    now.title = imgs[index].title

                }

                let prev = (index)=>{

                    if(index == 0){
                        index = imgs.length-1
                    }else{
                        index = index-1
                    }
                    index_num.value = index

                    jump(index_num.value)


                }

                let next = (index)=>{

                    if(index == imgs.length-1 ){
                        index = 0
                    }else{
                        index = index + 1
                    }

                    index_num.value = index

                    jump(index_num.value)

                }


                onMounted(()=>{
                    
                    setInterval(() => {
                        next(index_num.value)
                    }, 3000);
                })


                return {
                    imgs,
                    jump,
                    now,
                    prev,
                    next,
                    index:index_num,
                }
            }

        }).mount('#app')


    </script>


</body>
</html>

标签: none

评论已关闭