/*html代码*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/banner.css" />
</head>
<body>
<div class="main">
<!--banner图-->
<div class="banner" id="banner">
<a href="">
<div class="banner-item banner1 banner-active" ></div>
</a>
<a href="">
<div class="banner-item banner2 " ></div>
</a>
<a href="">
<div class="banner-item banner3 " ></div>
</a>
<a href="">
<div class="banner-item banner4" ></div>
</a>
<a href="">
<div class="banner-item banner5 " ></div>
</a>
</div>
<!--左右按钮-->
<a href="javascript:void(0)" class="button" id="prev"></a>
<a href="javascript:void(0)" class="button" id="next"></a>
<div class="dots" id="dots">
<span class="dots-active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript" src="js/lunbo.js" ></script>
</body>
</html>
css代码
*{
margin:0;
padding:0;
}
body{
font-family: "微软雅黑";
text-decoration: none;
}
a:link,a:active{
color:bule;
}
.main{
width:500px;
height:333px;
margin:30px auto;
position: relative;
}
.main .banner{
width:500px;
height:333px;
overflow: hidden;
}
.main .banner .banner-item{
width:500px;
height:333px;
float: left;
overflow: hidden;
display: none;
}
.banner1{
background:url("../img/1.jpg");
}
.banner2{
background:url("../img/2.jpg");
}
.banner3{
background:url("../img/3.jpg");
}
.banner4{
background:url("../img/4.jpg");
}
.banner5{
background:url("../img/5.jpg");
}
.main .banner .banner-active{
display:block;
}
.main .button{
width:50px;
height:50px;
background:rgba(7,17,27,0.1);
border-radius:50%;
position: absolute;
}
.main #prev{
top:50%;
margin-top:-40px;
}
.main #next{
top:50%;
right:0;
margin-top:-40px;
}
.main .dots {
position: absolute;
line-height:14px;
bottom: 14px;
right:0;
}
.main .dots span{
display: inline-block;
width:14px;
height:14px;
background:#000;
right:0;
z-index: 3;
margin-right:10px;
box-shadow: 0 0 0 2px rgba(255,255,255,1) inset;
}
.dots span.dots-active{
box-shadow: 0 0 0 2px #000 inset;
background:#fff;
}
js代码
var index=0,//当前索引
prev=ById('prev'),//上一张按钮
next=ById('next'),//下一张按钮
banner=ById('banner'),
bannerItem=banner.getElementsByClassName('banner-item'),//获取图片组
size=bannerItem.length,
dots=ById('dots'),
dotsItem=dots.getElementsByTagName('span'),//获取方块组
dotsLen=dotsItem.length,
timer=null;
//封装获取元素的方法
function ById(id){
return typeof(id)==='string'?document.getElementById(id):id;
}
//封装浏览器兼容监听事件方法
function addHandler(ele,type,handler){
//非IE浏览器支持DOM2级事件
if(ele.addEventListener){
ele.addEventListener(type,handler,true);
}else if(ele.attachEvent)//IE浏览器支持DOM2级
{
attachEvent("on"+type,handler);
}else{//不支持DOM2级
ele["on"+type]=handler;
}
}
//封装切换图片方法
function changeImg(){
for(var i=0;i<size;i++){
bannerItem[i].style.display='none';/*所有的图片*/
dotsItem[i].className='';/*所有的放块,不显示*/
}
bannerItem[0].style.display='none';
//当前图片显示
bannerItem[index].style.display='block';
//当前方块显示
dotsItem[index].className='dots-active';
}
//封装开始定时器方法
function startAutoPlay(){
timer=setInterval(function(){
index++;
if(index>=size) index=0;
changeImg();
},3000);
}
//封装清除定时器方法
function clearAutoPlay(){
if(timer){
clearInterval(timer);
}
}
//点击下一张按钮，图片切换到下一张
addHandler(next,'click',function(){
index++;
if(index>=size){
index=0;
}
changeImg();
})
//点击上一张，切换图片到上一张
addHandler(prev,'click',function(){
index--;
if(index<=-1){
index=size-1;
}
changeImg();
})
//点击方块，切换响应的图片
for(var j=0;j<dotsLen;j++){
dotsItem[j].setAttribute('dataIndex',j);
addHandler(dotsItem[j],'click',function(){
index=this.getAttribute('dataIndex');
changeImg();
});
}
//自动播放轮播图
startAutoPlay();
//鼠标移上去，停止播放
addHandler(banner,'mouseover',clearAutoPlay);
//鼠标移开，继续播放
addHandler(banner,'mouseout',startAutoPlay);
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
