看了setInterval方法直接上手盧一發輪播圖，還是第一次寫的哈哈
主要用到：
flex：flex佈局
addClass():添加樣式
removeClassv移除樣式
children()：獲取孩子節點
eq():獲取指定的第幾個li
append()：向值得容器追加元素
width()：獲取寬度
click()：點擊事件
css():給div賦新樣式
animate()：動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div,ul,li,body,html{
list-style: none;
margin: 0px;
padding: 0px;
}
.bannner-div{
overflow: hidden;
width: 100%;
}
.bannner-div ul{
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.bannner-div ul li{
display: none;
background: burlywood;
float: left;
text-align: center;
font-size: 30px;
width: 100%;
}
.banner-i{
text-align: center;
display: inline-block;
width: 100%;
}
.banner-i i{
font-style: initial;
width: 10px;
height: 10px;
margin: 5px ;
display: inline-block;
background: #DEB887;
border-radius: 100px;
}
.banner-i .active{
background: #000;
}
</style>
</head>
<body>
<div class="bannner-div">
<ul class="bannner1">
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
<div class="banner-i">
</div>
</div>
<script type="text/javascript">
var number = 0;
var len = 0;
$(function(){
bannerfunction('.bannner1','',2000);
})
/**執行方法
* @param {Object} divname:div的class或者id
* @param {Object} n_name :如果需要增加可以自己寫個名字來給相應的動畫效果
* @param {Object} n_time :動畫切換時間
*/
function bannerfunction(divname,n_name,n_time){
var lis = $(divname).children();
len = lis.length;
//根據li數量追加i數量,並給第一個添加active
for (var i = 0; i < len; i++) {
if(i == 0){
$(divname+'~div').append('<i class="active"></i>')
}else{
$(divname+'~div').append('<i ></i>')
}
}
var widths = $(divname).width();//指定獲取放入banner的容器div
console.log($(window).width())
//點擊i切換事件
$(divname+'~div i').click(function() {
$(divname+'~div i').removeClass('active');
$(this).addClass('active');
var nu = $(this).index()-1;
number = nu;
animate_banner(divname,widths)
})
$(divname).children().css('display','block')//阻止刷新彈跳
$(divname).width(widths*len)//給ul指定寬度
setInterval(
function(){
animate_banner(divname,widths)
},
n_time);//動畫
}
/**animate動畫切換
* @param {Object} clasname :容器class或id
* @param {Object} widths :寬度
*/
function animate_banner(clasname,widths){
var left = '';
//自動給i添加點擊樣式
$(clasname + '~div i').removeClass( 'active' )
var idiv = $(clasname+'~div i').eq( number + 1 ).addClass('active');
//如果數量小於li長度,每一次+1
if( number < len-1 ){
number = number +1 ;
left = '-' + number * widths + 'px';//距離左邊負像素點.
}else {
//否則數量爲0跳到第一個li
number = 0
left = '0px';//距離左邊0像素點
}
//動畫事件animate
$(clasname).animate({marginLeft:left})
}
</script>
</body>
</html>