用jQuery基于原生js封装的轮播

Posted windowClass

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用jQuery基于原生js封装的轮播相关的知识,希望对你有一定的参考价值。

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生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">&gt;</a></div>
<div><a href="#" id="pre">&lt;</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实现的轮播封装

 



























以上是关于用jQuery基于原生js封装的轮播的主要内容,如果未能解决你的问题,请参考以下文章

原生JS面向对象思想封装轮播图组件

原生JS实现过渡效果的轮播图

用jQuery写的轮播图

手机的轮播图可以用jquery来做吗

用 js封装以左右滑动的轮播图,调用任意

用js函数封装一个上下滑动的轮播图,调用任意