我发现轮播在很多网站里面都用到过，一个绚丽的轮播可以为网页增色不少，最近闲来无事，也用原生js封装了一个轮播，可能不像网上的插件那么炫，但是也有用心去做。主要用了闭包的思想。需要传递的参数有：图片地址的数组，图片宽度，上一页，下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间。功能：实现了轮播的自动轮播，可以点击上一页，下一页进行切换。
下面是html中的代码,只需要把存放的容器写好，引入jquery即可：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/lunboCss.css"/>
</head>
<body>
<div id="wapper">
<div id="imgList" style="left:0px;">
</div>
<div><a href="#" id="next">></a></div>
<div><a href="#" id="pre"><</a></div>
<div id="ulList">
<ul id="listBtn">
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lunboJs.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
在main.js中进行调用封装的轮播，传递相应的参数即可：
window.onload=function(){ var prePage=$("#pre");//上一页 var nextPage=$("#next");//下一页 var imglist=$("#imgList");//得到图片列表 var listBtn=document.getElementById("listBtn");//得到切换列表ul var oLi=listBtn.getElementsByTagName("li");//切换小圆点 var imgWidth=980;//图片宽度 var imgArray=['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg', 'img/img5.jpg','img/img6.jpg'];//存放图片地址的数组 for(var i=0;i<imgArray.length;i++){ imglist.innerHTML+="<img src="+imgArray[i]+"/>"; listBtn.innerHTML+="<li></li>"; } lunbo(imgArray,imgWidth,prePage,nextPage,imglist,2000,oLi);//传参 }
以下是封装的轮播js，通过闭包，提供调用的接口，这样可以更安全.只需调用该js文件，传递相应的参数，即可生成一个简单的而轮播：
(function(){ /* * imgArray:图片数组 * imgwidth：图片宽 * prePage：上一页 * nextPage：下一页 * imglist：图片放在哪个div * moveTime：自动轮播切换时间 * */ function carousel(imgArray,imgwidth,prePage,nextPage,imglist,moveTime,oLi){ var nextTimer;//定时器名 //上一页 prePage.onmousedown=function(){ imglist.style.left=parseInt(imglist.style.left)+imgwidth+"px"; imglist.style.transition="all 0.8s ease"; if(parseInt(imglist.style.left)>0){ imglist.style.left=-(imgArray.length-2)*imgwidth+"px"; imglist.style.transition=""; } stop();//清除自动播放 } //下一页 nextPage.onmousedown=function(){ showNextPage(); stop();//清除自动播放 } //自动播放 function play(){ nextTimer=setInterval(function () { showNextPage(); },moveTime); } play(); function stop(){ clearInterval(nextTimer); } prePage.onmouseout=play;//鼠标移开，重开定时器
nextPage.onmouseout=play;
//独立的函数，显示下一页 function showNextPage(){ imglist.style.left=parseInt(imglist.style.left)-imgwidth+"px"; imglist.style.transition="all 0.8s ease"; if(parseInt(imglist.style.left)<=-(imgArray.length-1)*imgwidth){ imglist.style.left=0+"px"; imglist.style.transition=""; } } //btnOnclik(); function btnOnclik(){ for(var i=0;i<oLi.length;i++){ oLi[i].index=i; oLi[i].onmousedown= function () { imglist.style.left=-imgwidth*(this.index)+"px"; stop();//清除自动播放 console.log("inin"); } oLi[i].onmouseout=play; } } } window.lunbo=carousel;//提供调用的接口
})();
在CSS中进行了简单的设置：
*{ padding:0px; margin:0px; font-family:"Microsoft YaHei"; } a{ text-decoration: none; } ul li{ list-style-type: none; } #wapper{ width:980px; height:330px; margin: 10px auto; overflow: hidden; position: relative; } #wapper #imgList{ width:5580px; height:330px; position: absolute; /*left: 0px;*/ /*top: 0px;*/ } #wapper img{ width:980px; height:330px; float:left; } #wapper a{ display: inline-block; color:#ccc; font-size:36px; width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: rgba(0,0,0,0.5); position: absolute; } #wapper #pre,#wapper #next{ opacity: 0; -webkit-transition: all 0.7s linear; position: absolute; top: 135px; } #pre{ left: 20px; } #next{ right: 20px; } #wapper:hover #pre,#wapper:hover #next{ opacity: 1; -webkit-transition: all 0.7s linear; } #pre:hover,#next:hover{ background-color: rgba(0,0,0,0.9); color: white; -webkit-transition: all 0.7s linear; } #ulList ul{ width: 445px; height: 10px; padding-left: 435px; text-align: center; line-height: 10px; position: absolute; bottom: 20px; } #ulList ul li{ list-style-type: none; float: left; margin: 5px; width: 10px; height: 10px; border-radius: 50%; background-color: #CCC; }
以上就是基于原生js实现的轮播封装