06- 定时器作业 轮播图

1.单边/循环 轮播

CSS部分 

 

<style>

*{

margin:0;

padding:0;

}

.banner{

position:relative;

width:658px;

height:411px;

margin:100px auto 0;

border:3px solid blue;

}

.banner ul{

list-style-type:none;

height:100%;

}

.banner ul li{

display:none;

position:absolute;

left:0;

top:0;

transition:1s;

}

.banner ul li.on{

display:block;

}

.banner ul li img{

display:block;

}

.banner .btn span{

position:absolute;

top:0;

bottom:0;

width:50px;

height:70px;

margin:auto;

background-color:#fff;

font-size:30px;

line-height:70px;

text-align:center;

cursor:pointer;

}

.banner .btn .next{

right:0;

}

.banner .top{

position:absolute;

bottom:0;

width:100%;

height:50px;

background-color:rgba(0,0,0,.5);

color:#fff;

text-align:center;

font-size:30px;

line-height:50px;

}

.banner .check{

position:absolute;

bottom: -60px;

width:100%;

text-align:center;

}

.banner .check span{

display:inline-block;

width:90px;

height:40px;

margin:0 20px;

background-color:#000;

line-height:40px;

color:#fff;

cursor:pointer;

}

.banner .check span.on{

background-color:#f33;

}

</style>

 

 

html部分 

 

<divclass="banner">

<ul class="imglist">

<li class='on'><img src="images/1.jpg" alt="" /></li>

<li><img src="images/2.jpg" alt="" /></li>

<li><img src="images/3.jpg" alt="" /></li>

<li><img src="images/4.jpg" alt="" /></li>

<li><img src="images/5.jpg" alt="" /></li>

</ul>

<div class="btn">

<span class="pre">&lt;</span>

<span class="next">&gt;</span>

</div>

<p class='top'><span class='text'>1</span>/5</p>

<div class="check">

<span class="on" id='left'>单边播放</span>

<span id='right'>循环播放</span>

</div>

</div>

 

 

  JS部分

 

<script>

// 单边播放思路：1.点击事件：当点击下一页时，第一张图片隐藏，第二张图片显示

// 点击单边和循环的时候颜色会切换，需要两个点击事件

// 循环播放：需要进行一个标记，true 为单边，flase 为循环，使用if语句

/* aLi[index].style.display='none'; //点击后第一张图片隐藏

index++;

aLi[index].style.display='block'; //点击后第二张图片显示，此时index=1，再点击再重复

如果要设置多个css样式的时候，行内样式就比较麻烦，可以在css写一个类名，然后需要的是时候给他设置

*/

var oNext = document.getElementsByClassName('next')[0];

var oPre = document.getElementsByClassName('pre')[0];

var aLi = document.getElementsByTagName('li');

var oLeft = document.getElementById('left');

var oRight = document.getElementById('right');

var oText = document.getElementsByClassName('text')[0];

var index = 0; //存放当前的图片索引,因为li的数组从0开始

var mask=true; //标记分类 true为单边播放 flase为循环播放

oNext.onclick = function(){

aLi[index].className = ''; //给第1个li去掉样式，第一张图片隐藏了

index++;

console.log(index);

if(index==aLi.length){ //切换到第五张图片的时候判断是单边还是循环

if(mask){

index = aLi.length-1;

/*图片位于li里面，li的长度为5，当index=5的时候，第5张会隐藏，第六张会显示

因为没有第六张，所以让index的值为4，那第4张图片被点击的时候，第四张

会隐藏，第五章会显示，防止超出*/

}else{ //循环，图片从第5张-->第1张

index =0;

}

}

oText.innerHTML = index+1;

aLi[index].className = 'on'; //点击后设置class='on'类名(css已有这个类名)

}

oPre.onclick = function(){

aLi[index].className = '';

index--;

console.log(index);

if(index==-1){

if(mask){

index=0;

}else{

index =aLi.length-1;

}

}

console.log(index)

oText.innerHTML = index+1;

aLi[index].className = 'on';

}

//单边轮播

oLeft.onclick = function(){

mask = true;

oLeft.className = 'on';

oRight.className = '';

}

//循环轮播

oRight.onclick = function(){

mask = false

oRight.className = 'on'; //点击后添加class='on'类名(css已有的样式)

oLeft.className = ''; //点击后class='on'类名被删除

}

</script>