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);