原生js实现的轮播图，易用+可多用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style rel="stylesheet"> body { margin: 0; padding: 0 } .imgwall { position: relative; overflow: hidden; margin: 0 auto } .imgwall ul { position: absolute; list-style: none; padding: 0; margin: 0; left: 0 } .imgwall li { float: left } .imgwall img { display: block; filter:alpha(opacity=50); /*IE滤镜，透明度50%*/ -moz-opacity:0.5; /*Firefox私有，透明度50%*/ opacity:0.5;/*其他，透明度50%*/ } .dot { width: 100%; height: 10px; position: absolute; bottom: 20px; } .warp { width: 50%; margin: 0 auto; text-align: center } .warp a { display: block; float: left; } .warp span { display: block; height: 20px; width: 20px; border-radius: 100px; margin: 0 auto; background: white; border: 4px solid #DDD; filter:alpha(opacity=70); /*IE滤镜*/ -moz-opacity:0.7; /*Firefox私有*/ opacity:0.7 /*其他*/ } .warp .active { background: red; } </style> </head> <body> <div class="imgwall"> <ul class="imgul"> <li><a href="javascript:void(0)"><img src="....jpg" /></a></li> <li><a href="javascript:void(0)"><img src="....jpg" /></a></li> <li><a href="javascript:void(0)"><img src="....jpg" /></a></li> <li><a href="javascript:void(0)"><img src="....jpg" /></a></li> </ul> <div class="dot"> <div class="warp"> </div> </div> </div> <div class="imgwall"> <ul class="imgul"> <li><a href="javascript:void(0)"><img src="....jpg" /></a></li> <li><a href="javascript:void(0)"><img src="....jpg" /></a></li> <li><a href="javascript:void(0)"><img src="....jpg" /></a></li> </ul> <div class="dot"> <div class="warp"> </div> </div> </div> </body> <script> window.onload=function(){ //设置全局变量 var imgwall = getByClass('imgwall'); var warp = getByClass('warp'); config(); autoMove(4000);//每隔4秒钟自动滚一张 //初始化设置 function config(){ for(var i=0;i<imgwall.length;i++){ imgwall[i].ul = imgwall[i].getElementsByTagName('ul')[0]; imgwall[i].img = imgwall[i].getElementsByTagName('img')[0]; imgwall[i].imgs = imgwall[i].getElementsByTagName('img'); imgwall[i].target = -imgwall[i].img.offsetWidth; //添加span标签 for(var j=0;j<imgwall[i].getElementsByTagName('img').length;j++) { var aWidth = 100/imgwall[i].getElementsByTagName('img').length + "%"; warp[i].innerHTML += '<a style = "width:'+aWidth+'"><span></span></a>'; } //设置整体大小 imgwall[i].style.width = imgwall[i].img.offsetWidth+'px'; imgwall[i].style.height = imgwall[i].img.offsetHeight+'px'; imgwall[i].doter = imgwall[i].getElementsByTagName('span'); imgwall[i].ul.style.width = imgwall[i].doter.length*imgwall[i].img.offsetWidth+'px';//设置ul的宽度 //设置标志点的样式和事件 for(var j=0;j<imgwall[i].doter.length;j++){ imgwall[i].doter[0].className='active'; startMove(imgwall[i].img,{'opacity':100,'padding-top':0},10); imgwall[i].doter[j].allbrother = imgwall[i].doter; imgwall[i].doter[j].pul=imgwall[i].ul; imgwall[i].doter[j].pimg=imgwall[i].img; imgwall[i].doter[j].index = [i,j]; imgwall[i].doter[j].onclick=function(){ for(var i=0;i<this.allbrother.length;i++){ this.allbrother[i].className = ''; startMove(imgwall[this.index[0]].imgs[i],{'opacity':0,'padding-top':this.pimg.offsetHeight},50); } this.className='active'; startMove(this.pul,{'left':-this.index[1]*this.pimg.offsetWidth},10); startMove(imgwall[this.index[0]].imgs[this.index[1]],{'opacity':100,'padding-top':0},10); imgwall[this.index[0]].target = -imgwall[this.index[0]].img.offsetWidth*(this.index[1]); } } } } //自动播放 function autoMove(time){ setInterval(function(){ for(var i=0;i<imgwall.length;i++){ //判断是否滚到最后一个图 console.log(imgwall[i].target); if(Math.abs(imgwall[i].ul.offsetLeft) >= (imgwall[i].getElementsByTagName('img').length-1)*imgwall[i].img.offsetWidth) { imgwall[i].target = 0 ;//跳到第一张 imgwall[i].ul.style.left = imgwall[i].target; } startMove(imgwall[i].ul,{'left':imgwall[i].target},10); imgwall[i].target -= imgwall[i].img.offsetWidth; for(var j=0;j<imgwall[i].doter.length;j++){ imgwall[i].doter[j].className = ''; imgwall[i].doter[Math.abs(imgwall[i].target)/imgwall[i].img.offsetWidth-1].className = 'active'; startMove(imgwall[i].imgs[j],{'opacity':0,'padding-top':imgwall[i].img.offsetHeight},50); startMove(imgwall[i].imgs[Math.abs(imgwall[i].target)/imgwall[i].img.offsetWidth-1],{'opacity':100,'padding-top':0},10); } } },time); } //class选择器 function getByClass(classname){ var obj=document.getElementsByTagName('*'); var res=[]; for(var i=0;i<obj.length;i++){ if(obj[i].className == classname) { res.push(obj[i]); } } return res; } //获取样式 function getStyleName(obj,attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,null)[attr]; }; }; //运动框架 function startMove(obj,json,v,endFn) { clearInterval(obj.timer); obj.timer=setInterval(function(){ var mStop=true; for(var attr in json) { var crr=0; if(attr=='opacity') { crr=Math.round(parseFloat(getStyleName(obj,attr)*100)); } else { crr=parseInt(getStyleName(obj,attr)); } var speed=(json[attr]-crr)/v; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(crr!=json[attr]){mStop=false}; if(attr=='opacity') { obj.style[attr]=(crr+speed)/100; obj.style.filter='alpha(opacity='+(crr+speed)+')'; } else { obj.style[attr]=crr+speed+'px'; } } if(mStop) { clearInterval(obj.timer); if(endFn)endFn(); } },30); } } </script> </html>
没有考虑性能优化问题，纯属想到哪编到哪里，连遍历函数都没有用。
使用方法：只需把class=‘imgwall’的div放到要放的位置，然后修改里面img标签和a标签就可以了，其他什么都不用做。
注意事项：同一个页面，可以同时多处使用。每张图片的大小要一致，图片数量随意~。
