轮播图

时间：2019-12-27 00:14:38 阅读：74 评论：0 收藏：0 [点我收藏+]

标签：display eth idt class style line key osi ali

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
    <style>
        .content {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
            
        }
        .content > div {
            display: inline-block;
            width: 300px;
            height: 200px;
            line-height:200px;
            position: absolute;
            background-color: red;
            text-align: center;
            transition: all 0.5s
        }
        
    </style>
<body>
<div id="app">
    <div class="content">
        <div v-for="(i,index) in arr" :key="i" v-show="showElement(index)" :id="‘img‘ + index">
            {{i}}
        </div>
    </div>

<div>
    <button @click="changeClick(0)">left</button>
<button @click="changeClick(1)">right</button>
</div>
</div>

<script>
new Vue({
  el: ‘#app‘,
  data: {
    message: ‘Hello Vue.js!‘,
    activeIndex: 0,
    arr: [0, 1, 2, 3, 4, 5],
    timer: ‘‘,
  },
    mounted () {
        let that = this
        this.$nextTick(() => {
            let next =  (that.activeIndex + 1) % 6
            let before = (that.activeIndex+ 5) % 6
            
            document.getElementById(‘img‘ + that.activeIndex).style.left = ‘0px‘
            document.getElementById(‘img‘ + next).style.left = ‘300px‘
            document.getElementById(‘img‘ + before).style.left = ‘-300px‘
            setInterval (function () {

                let next =  (that.activeIndex + 1) % 6
                let before = (that.activeIndex+ 5) % 6

                document.getElementById(‘img‘ + that.activeIndex).style.left = ‘-300px‘
                document.getElementById(‘img‘ + next).style.left = ‘0px‘

                that.activeIndex = next
                that.$nextTick(() => {
                    let nextt = (that.activeIndex+ 1) % 6
                    document.getElementById(‘img‘ + nextt).style.left = ‘300px‘
                })
            }, 5000)
        
        })
    },
    methods: {
        
        showElement (index) {
        let before = (  this.activeIndex+ 5) % 6
            let after = (  this.activeIndex+ 1) % 6
            if (index === this.activeIndex || index === after || index === before) {
                return true;
            } 
        return false
        },
        changeClick(type) {
            let that = this
            if ( type === 0) {
                let before = (that.activeIndex+ 5) % 6

                document.getElementById(‘img‘ + that.activeIndex).style.left = ‘300px‘
                document.getElementById(‘img‘ + before).style.left = ‘0px‘

                that.activeIndex = before
                that.$nextTick(() => {
                    let nextt = (that.activeIndex+ 5) % 6
                    document.getElementById(‘img‘ + nextt).style.left = ‘-300px‘
                })
            } else {
                let next =  (that.activeIndex + 1) % 6
                document.getElementById(‘img‘ + that.activeIndex).style.left = ‘-300px‘
                document.getElementById(‘img‘ + next).style.left = ‘0px‘

                that.activeIndex = next
                that.$nextTick(() => {
                    let nextt = (that.activeIndex+ 1) % 6
                    document.getElementById(‘img‘ + nextt).style.left = ‘300px‘
                })
            }
        }
    }
})
</script>
</body>
</html>

轮播图

标签：display eth idt class style line key osi ali

原文地址：https://www.cnblogs.com/zhua-wa/p/12104991.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行