易模仿芒果TV官网轮播图
目录
轮播图分析：
1、轮播图实现的功能
2、图片叠加原理
html页面布局：
CSS修饰：
JavaScript：
轮播图分析：1、轮播图实现的功能自动滚动图片。触碰圆点按钮，按钮亮起；点击圆点按钮显示对应图片，按钮亮起。触碰错左右按钮，按钮变色；点击左右按钮，图片左右轮播，并且图片对应的圆点按钮亮起。
2、图片叠加原理
轮播图基本上都是将图片插在
- 标签里，不加任何css会以默认排列方式排列，如下图。
-
-
-
-
-
我们需要将所有图片叠加在一起，然后让它们按一定时间移动。
html页面布局：
CSS修饰：
.banner{
position: relative;/*相对定位 给绝对定位位置参考*/
width: 100%;
height: 300px;
float: left;
}
.banner .item{
display: none;/*隐藏元素*/
position: absolute;/* 绝对定位*/
width: 100%;
height: 300px;
top: 0;
left: 0;
}
ul{
list-style-type: none;/*清除默认列表样式 ....*/
margin: 0;
padding: 0;/*内外编剧清除*/
}
.lunbo{
width: 100%;
height: 300px;
}
/*左右按钮的属性设置*/
.lr-tab .btn{
position: absolute;
top: 120px;
width: 41px;
height: 69px;
background: url("img/8a.png");
}
.lr-tab .left{
left: 0px;
background-position-x: -83px;
}
.lr-tab .right{
right: 0px;
background-position-x: -125px;
}
/*左右按钮触碰事件*/
.lr-tab .left:hover{
background-position-x: 0px;
}
.lr-tab .right:hover{
background-position-x: -41px;
}
/*圆形按钮属性设定*/
.tab-btn{
position: absolute;
right: 40px;
bottom: 20px;
width: 120px;
height: 30px;
top: 270px;
}
.tab-btn .btn{
float: left;
width: 6px;
height: 6px;
background: #868686;
border: 2px solid #c3c3c3;/*边框*/
margin-left: 10px;
border-radius: 50%;
}
/*圆形按钮触碰事件*/
.tab-btn .btn:hover{
background: #e4e4e4;
border-color:#7f7f7f;
}
.tab-btn .active{
background: #e4e4e4;
border-color:#7f7f7f;
}
我在小米官网发现他们的左右按钮非常有趣，他们用的是一张图片实现的左右按钮的样式和点击触碰的颜色变换，按钮图片如下：
这样就非常方便。
JavaScript：
这里引用的是Jquery。