新增第137个小实例：仿制腾讯视频的轮播图
DESKTOP-BM6RJU5\wyanh
|
|
@ -143,4 +143,5 @@
|
|||
133. HTML5+CSS3+JS小实例：带标题描述的圆角图片手风琴效果
|
||||
134. HTML5+CSS3小实例：简单又别致的环形加载动画
|
||||
135. HTML5+CSS3+Vue小实例：左侧分类菜单右侧轮播图的组合布局
|
||||
136. HTML5+CSS3小实例：萌翻少女心的发光果冻泡泡
|
||||
136. HTML5+CSS3小实例：萌翻少女心的发光果冻泡泡
|
||||
137. HTML5+CSS3+Vue小实例：仿制腾讯视频的轮播图
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
*{
|
||||
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: font-size 0.1s;
|
||||
}
|
||||
.title span{
|
||||
font-size: 13px;
|
||||
/* 副标题默认隐藏 */
|
||||
opacity: 0;
|
||||
}
|
||||
/* 当前项样式 */
|
||||
.title.active{
|
||||
color: #ff5c38;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.title.active span{
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>仿制腾讯视频的轮播图</title>
|
||||
<link rel="stylesheet" href="137.css">
|
||||
<script src="/js/vue.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="app" :style="'background-color:'+active_color+';'">
|
||||
<div class="banner" :style="'background-image:url('+active_image+');'"></div>
|
||||
<div class="title-box">
|
||||
<div :class="['title',index==active_index?'active':'']" v-for="(item,index) in list" @mouseover="changeBanner(index)">
|
||||
{{item.title}}
|
||||
<span>{{item.sub_title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script src="137.js"></script>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
new Vue({
|
||||
el:'#app',
|
||||
data:{
|
||||
timer:null, //定时器
|
||||
active_index:0, //当前轮播下标
|
||||
active_image:'/images/137/1.jpg', //当前轮播背景图
|
||||
active_color:'#53839a', //当前轮播背景色
|
||||
size:9, //轮播图数量
|
||||
// banner数据（json格式）
|
||||
list:[{
|
||||
title:'正在直播NBA',
|
||||
sub_title:'快船vs森林狼',
|
||||
image:'/images/137/1.jpg',
|
||||
bg_color:'#53839a'
|
||||
},
|
||||
{
|
||||
title:'特战荣耀·热播',
|
||||
sub_title:'杨洋展特种军魂',
|
||||
image:'/images/137/2.jpg',
|
||||
bg_color:'#bbbbaf'
|
||||
},
|
||||
{
|
||||
title:'王牌对王牌7',
|
||||
sub_title:'沈腾贾玲cos喜羊羊',
|
||||
image:'/images/137/3.jpg',
|
||||
bg_color:'#120f16'
|
||||
},
|
||||
{
|
||||
title:'军火大劫案',
|
||||
sub_title:'国版“史密斯夫妇”燃炸',
|
||||
image:'/images/137/4.jpg',
|
||||
bg_color:'#600004'
|
||||
},
|
||||
{
|
||||
title:'毛雪汪',
|
||||
sub_title:'李雪琴花式夸毛不易新歌',
|
||||
image:'/images/137/5.jpg',
|
||||
bg_color:'#eeec88'
|
||||
},
|
||||
{
|
||||
title:'狙击手的战争',
|
||||
sub_title:'乌克兰战争狙击手传奇',
|
||||
image:'/images/137/6.jpg',
|
||||
bg_color:'#89a1a3'
|
||||
},
|
||||
{
|
||||
title:'致命谋杀',
|
||||
sub_title:'揭秘连环杀手作案动机',
|
||||
image:'/images/137/7.jpg',
|
||||
bg_color:'#1d221c'
|
||||
},
|
||||
{
|
||||
title:'现在就告白',
|
||||
sub_title:'健身教练告白女客户',
|
||||
image:'/images/137/8.jpg',
|
||||
bg_color:'#bd60d5'
|
||||
},
|
||||
{
|
||||
title:'【海量福利】',
|
||||
sub_title:'诺亚之心上线领豪礼',
|
||||
image:'/images/137/9.jpg',
|
||||
bg_color:'#0d283d'
|
||||
}]
|
||||
},
|
||||
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.size-1){
|
||||
_t.active_index=0;
|
||||
}
|
||||
_t.changeBanner(_t.active_index);
|
||||
}, 3000);
|
||||
},
|
||||
// 切换轮播
|
||||
changeBanner(index){
|
||||
this.stopAutoPlay();
|
||||
this.active_index=index;
|
||||
this.active_image=this.list[index].image;
|
||||
this.active_color=this.list[index].bg_color;
|
||||
this.startAutoPlay();
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
// 初始化，自动播放轮播
|
||||
this.startAutoPlay();
|
||||
}
|
||||
})
|
||||
|
After Width: | Height: | Size: 631 KiB |
|
After Width: | Height: | Size: 183 KiB |
|
After Width: | Height: | Size: 162 KiB |
|
After Width: | Height: | Size: 166 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 473 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 145 KiB |