易模仿芒果TV官網輪播圖
目錄
輪播圖分析：
1、輪播圖實現的功能
自動滾動圖片。
觸碰圓點按鈕，按鈕亮起；點擊圓點按鈕顯示對應圖片，按鈕亮起。
觸碰錯左右按鈕，按鈕變色；點擊左右按鈕，圖片左右輪播，並且圖片對應的圓點按鈕亮起。
2、圖片疊加原理
輪播圖基本上都是將圖片插在<ul>標簽里，不加任何css會以默認排列方式排列，如下圖。
我們需要將所有圖片疊加在一起，然后讓它們按一定時間移動。
html頁面布局：
<div class="banner" >
<div class="img-wrap">
<ul>
<li class="item" style="display: block">
<a href="https://www.mgtv.com/b/328169/5364726.html"><img src="img/綜藝1.jpg" alt="" class="lunbo"></a>
</li>
<li class="item">
<a href="https://www.mgtv.com/b/328606/5354871.html"><img src="img/綜藝2.jpg" alt="" class="lunbo"></a>
</li>
<li class="item">
<a href="https://www.mgtv.com/b/328308/5376308.html"><img src="img/綜藝3.jpg" alt=""class="lunbo"></a>
</li>
<li class="item">
<a href="https://www.mgtv.com/b/328329/5345359.html"><img src="img/綜藝4.jpg" alt="" class="lunbo"></a>
</li>
<li class="item">
<a href="https://www.mgtv.com/b/327991/5377004.html"><img src="img/綜藝5.jpg" alt="" class="lunbo"></a>
</li>
</ul>
</div>
<div class="lr-tab">
<div class="left btn"></div>
<div class="right btn"></div>
</div>
<div class="tab-btn">
<ul>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
</ul>
</div>
</div>
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：
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
var index2 = 0;/*初始化一個變量 指向下彪*/
//點擊點
$(".tab-btn .btn").click(function () {
index2 = $(this).index();//獲取點擊該元素下彪
$(this).addClass("active").siblings().removeClass("active");
$(".item").eq(index2).fadeIn().siblings().fadeOut();
});
//點擊切換效果
$(".lr-tab .right").click(function () {
index2 ++;
if (index2 >4){ index2 = 0;}
$(".item").eq(index2).fadeIn().siblings().fadeOut();
$(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");
});
$(".lr-tab .left").click(function () {
index2 --;
if(index2 < 0){index2 = 4;}
$(".item").eq(index2).fadeIn().siblings().fadeOut();
$(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");
});
var time2 = setInterval(function () {
index2 ++;
if (index2 >4){ index2 = 0;}
$(".item").eq(index2).fadeIn().siblings().fadeOut();
$(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");
},4000); //定時器 重復
</script>
這里引用的是Jquery。