輪播圖佈局
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.banner{
position: relative;
overflow: hidden;
margin: auto;
width: 1000px;
}
.pic{
position: relative;
width: 1000%;
overflow: hidden;
}
.pic li{
float: left;
width: 10%;
}
.pic li img{
display: block;
width: 100%;
}
.btns{
position: absolute;
bottom: 50%;
width: 100%;
height: 0;
}
.btns span{
float: left;
width: 50px;
line-height: 50px;
text-align: center;
font-family:"宋體";
font-size: 30px;
color:red;
background-color: rgba(255,255,255,.5);
}
.btns span + span{
float: right;
}
.pic-num{
position: absolute;
width: 100%;
bottom:20px;
font-size: 0;
text-align: center;
}
.pic-num li{
display: inline-block;
width: 15px;
height: 15px;
margin: 0 8px;
border-radius: 50%;
background-color:blue;
}
.pic-num li.on{
background-color:pink;
}
.pic-num li:hover{
background-color:pink;
cursor: pointer;
}
</style>
</head>
<body>
<div class="banner">
<div class="pic">
<ul>
<li><a href=""><img src="images/1.jpeg" alt=""></a></li>
<li><a href=""><img src="images/2.jpg" alt=""></a></li>
<li><a href=""><img src="images/3.jpg" alt=""></a></li>
<li><a href=""><img src="images/4.jpg" alt=""></a></li>
</ul>
</div>
<div class="btns">
<span><</span>
<span>></span>
</div>
<ul class="pic-num">
</ul>
</div>
</body>生成小圓點的方法
- 是通過for循環生成
for(var i=0;i<_length;i++){
oPicNum.innerHTML +="<li></li>";
}- 通過數組拼接生成
var opicNumLi =new Array(_length+1);
oPicNum.innerHTML = opicNumLi.join("<li></li>");
console.log(oPicNum);當圖片切換時小圓點的顏色發生改變
- 通過index改變，將小圓點的[索引]=【index】,切換類名改變狀態
opicNumLi[index].className ="on";當移動到後一張圖時，前張圖對應的小圓點顏色爲原來未點擊狀態
- 重新定義變量 upper
upper=0;//重新定義變量
oBtns[1].onclick =function(){
index++;
//當它大於_length 就設置爲0
index%=_length;
opicNumLi[upper].className ="";
opicNumLi[index].className ="on";
upper =index;//讓upper等於index-1；
move();
}- 在index加加減減之前設置未未點擊狀態
oBtns[0].onclick =function(){
opicNumLi[index].className ="";
index--;
if(index<0){
index=_length-1;
}
// opicNumLi[upper].className ="";
opicNumLi[index].className ="on";
// upper =index;
move();
}點擊小圓點 就可以切換圖片
- 這時需要給小圓點綁定事件
for(var i=0;i<_length;i++){
var thatLi =document.createElement("li");
thatLi.index =i;
thatLi.onclick=function(){
opicNumLi[index].className ="";//原來顯示的圖片小圓點顏色消失
index=this.index;
opicNumLi[index].className ="on";//點擊的圓點狀態爲on
move();
}
oPicNum.appendChild(thatLi);
}
var opicNumLi =oPicNum.querySelectorAll("li");
opicNumLi[index].className ="on";防止快速點擊圖片 報錯
- 快速點擊時 動畫還沒走完 就index在一直加加 而
opicNumLi[index].className ="";這樣就會報錯 因爲超過length長度
定義開關，只有動畫走完開關纔開， 在開的狀態，index才能加加，動畫才能執行
var_status =true;
function move() {
_status =false;//開關關閉
animation(opic,{
left : index * -_width
},{
duration : 600
},function () {
_status =true;//動畫執行完纔打開開關
if (index>=_length){
index=0;
this.style.left =0;//因爲直接設置css，速度是非常快的，肉眼看不到效果
}
})
}
oBtns[0].onclick =function(){
if (_status){
opicNumLi[index].className ="";
index--;
if(index<0){
opic.style.left =-_length* _width+"px";
index=_length-1;
}
opicNumLi[index].className ="on";
move();
}
}
oBtns[1].onclick =function(){
if (_status){
opicNumLi[index].className ="";
index++;
opicNumLi[index%_length].className ="on"; //當它大於_length 就設置爲0
move();
}
}