vue，js腾讯视频轮播图

最新推荐文章于 2024-10-11 00:04:47 发布
先天性神经靐
最新推荐文章于 2024-10-11 00:04:47 发布
阅读量502
点赞数 1
本文链接：https://blog.youkuaiyun.com/qq_56714977/article/details/124744451
版权
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>仿制腾讯视频的轮播图</title>
	<script src="js/vue-2.6.12.js" type="text/javascript" charset="utf-8"></script>
   <style type="text/css">
   	*{
   	    margin: 0;
   	    padding: 0;
   	    /* 设置的边框和内边距的值时包含在总宽高内的 */
   	    box-sizing: border-box;
   	}
   	body{
   	    /* 100%窗口高度 */
   	    height: 100vh;
   	    /* 弹性布局 居中显示 */
   	    display: flex;
   	    justify-content: center;
   	    align-items: center;
   	}
   	.container{
   	    /* 100%窗口宽度 */
   	    width: 100vw;
   	    /* 相对定位 */
   	    position: relative;
   	    /* 弹性布局 垂直排列 水平居中 */
   	    display: flex;
   	    flex-direction: column;
   	    align-items: center;
   	}
   	.banner{
   	    /* 90%窗口宽度 */
   	    width: 90vw;
   	    max-width: 1680px;
   	    height: 432px;
		background-size: cover;
   	    background-position: center;
   	}
   	.title-box{
   	    width: 348px;
   	    height: 432px;
   	    background-color: rgba(0,0,0,0.45);
   	    /* 绝对定位 右侧 */
   	    position: absolute;
   	    top: 0;
   	    right: 0;
   	    color: #fff;
   	    padding-top: 20px;
   	    /* 背景模糊 */
   	   /* backdrop-filter: blur(3px); */
   	}
   	.title{
   	    height: 43px;
   	    line-height: 43px;
   	    text-indent: 40px;
   	    font-size: 15px;
   	    cursor: pointer;
   	    /* 文本不换行 */
   	    white-space: nowrap;
   	    /* 溢出隐藏 */
   	    overflow: hidden;
   	    /* 字体大小改变时的过渡 */
   	    transition: all 0.1s;
   	}
   	.title span{
   	    font-size: 13px;
   	    /* 副标题默认隐藏 */
   	    opacity: 0;
   	}
   	/* 当前项样式 */
   	.title.active{
   	    color: #ff5c38;
   	    font-size: 22px;
   	    font-weight: bold;
   	}
   	.title.active span{
   	    opacity: 1;
   	}
   </style>
    
</head>

<body>
    <div class="container" id="app" :style="'background-color:'+active_color+';'">
        <div class="banner" :style="'background:url('+active_image+') no-repeat;'"></div>
        <div class="title-box">
            <div :class="['title',index==active_index?'active':'']" v-for="(item,index) in list" @mouseenter="changeStop(index)" @mouseleave="startAutoPlay()">
                {{item.title}}
                <span>{{item.sub_title}}</span>
            </div>
        </div>
    </div>
	<script type="text/javascript">
		new Vue({
		    el:'#app',
		    data:{
		        timer:null, //定时器
		        active_index:0, //当前轮播下标
		        active_image:'./img/1.jpg', //当前轮播背景图
		        active_color:'#e3e1e2', //当前轮播背景色
		        list:[{
		            title:'正在直播NBA',
		            sub_title:'快船vs森林狼',
		            image:'./img/1.jpg',
		            bg_color:'#e3e1e2'
		        },
		        {
		            title:'特战荣耀·热播',
		            sub_title:'杨洋展特种军魂',
		            image:'./img/2.jpg',
		            bg_color:'rgba(0,0,0,0.8)'
		        },
		        {
		            title:'王牌对王牌7',
		            sub_title:'沈腾贾玲cos喜羊羊',
		            image:'./img/3.jpg',
		            bg_color:'#6a442d'
		        }]
		    },
		    methods:{
		        // banner停止播放
		        stopAutoPlay(){
		            if(this.timer){
		                clearInterval(this.timer);
		            }
		        },
		        // banner开始播放
		        startAutoPlay(){
		            let _t=this;
		            this.timer=setInterval(() => {
		                _t.active_index++;
		                if(_t.active_index>_t.list.length-1){
		                    _t.active_index=0;
		                }
		                _t.changeBanner(_t.active_index);
		            }, 1000);
		        },
		        // 切换轮播
		        changeBanner(index){
		            this.active_index=index;
		            this.active_image=this.list[index].image;
		            this.active_color=this.list[index].bg_color;
		        },
				changeStop(index){
					this.stopAutoPlay()
					this.changeBanner(index)
				}
		    },
		    mounted(){
		        // 初始化，自动播放轮播
		        this.startAutoPlay();
		    }
		})
	</script>
</body>

</html>