轮播图

Posted 2021-03-20 zhua-wa

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于轮播图的主要内容，如果未能解决你的问题，请参考以下文章

网页HTML代码制作轮播图效果

HTML轮播图片代码，带解释

js原生 JavaScript轮播图渐变淡入淡出效果实现（附代码）

JS 轮播图（无缝连接的轮播图实现，含代码供参考）

淘宝首页宽屏图片轮播代码

网页设计中如何添加焦点切换轮播图呢