轮播图我们在网站中经常看到,主要就是为了在有限的空间内展示出更多的内容,同时也增加了界面的特效,让页面不是那么死版,让界面动起来,看着更加舒服,话不多说,代码如下:
效果:
HTML代码:
<div id="slide">
<!-- 图片区 -->
<div id="pic">
<div class="current"><img src="images/0.jpg" alt=""></div>
<div><img src="images/1.jpg" alt=""></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
<div><img src="images/4.jpg" alt=""></div>
</div>
<!-- 控制点 -->
<ol id="control">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- 箭头控制区 -->
<div id="arrow">
<a class="arrow arrow-left" href="#"><img src="images/arr-left.png" alt=""></a>
<a class="arrow arrow-right" href="#"><img src="images/arr-right.png" alt=""></a>
</div>
</div>
CSS样式:
#slide{width: 500px; height: 313px; margin: 30px auto; position: relative;}//轮播区
#pic div{width: 500px; height: 313px; display:none;}//轮播图
#pic div.current{display: block;}//当前显示轮播
#control{list-style: none; position: absolute; left: 50%; margin-left: -50px; bottom: 15px;}//控制点
#control li{width: 12px; height: 12px; margin-right: 10px; background: #ddd; border-radius: 50%;float: left;}
#control li.current{background: #f00;}//当前控制点样式
#control li:hover{cursor: pointer;}
#arrow{position: absolute; top: 50%;width: 100%; display: none;}//箭头指示器
#arrow .arrow{display: inline-block; width: 32px; height: 32px; background: rgba(0,0,0,0.3);}
#arrow .arrow.arrow-right{float: right;}
JS代码:
window.onload=function(){
//轮播区
var slide=document.getElementById('slide');
//图片区
var pic=document.getElementById('pic').getElementsByTagName('div');
//控制区
var lis=document.getElementById('control').getElementsByTagName('li');
//箭头控制区
var arrows=document.getElementById('arrow');
var arrs=arrows.getElementsByClassName('arrow');
//自动轮播
var timer=setInterval(move,1000);
//定义初始化索引
var index=0;
//自动轮播
function move(){
//清除当前索引样式
pic[index].className='';
//清除当前控制区样式
lis[index].className='';
index++;
if(index==pic.length){
index=0;
}
pic[index].className='current';
lis[index].className='current';
}
//控制区控制轮播
for (var i=0; i<lis.length; i++){
//保存当前索引
lis[i]._index=i;
lis[i].onclick=function(){
//去除当前样式
lis[index].className='';
//隐藏当前内容区
pic[index].className='';
//修改当前样式
this.className='current';
//修改当前图片
pic[this._index].className='current';
//修改当前索引
index=this._index;
}
}
//箭头控制轮播
//上一张
arrs[0].onclick=function(){
movePre();
}
//下一张
arrs[1].onclick=function(){
move();
}
//鼠标经过轮播区停止轮播
slide.onmouseover=function(){
clearInterval(timer);
arrows.style.display='inline-block';
}
//鼠标离开继续轮播
slide.onmouseout=function(){
timer=setInterval(move,1000);
arrows.style.display='none';
}
function movePre(){
//清除当前样式
pic[index].className='';
lis[index].className='';
index--;
if (index==-1) {
index=pic.length-1;
}
pic[index].className='current';
lis[index].className='current';
}
}
简单的轮播就这么完成了,并没有想象中的那么难,需要的拿去,不谢