我发现轮播在很多网站里面都用到过，一个绚丽的轮播可以为网页增色不少，最近闲来无事，也用原生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:px;">
    </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:;

    -webkit-transition: all 0.7s linear;

    position: absolute;

    top: 135px;

}

#pre{

    left: 20px;

}

#next{

    right: 20px;

}

#wapper:hover #pre,#wapper:hover #next{

    opacity:;

    -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封装的轮播的更多相关文章

  1. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  2. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  3. 原生js实现无缝轮播

    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...

  4. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  5. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  6. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  7. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  8. 类似jQuery的原生JS封装的ajax方法

    一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...

  9. 原生JS实现旋转木马轮播图特效

    大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. Python学习笔记（基本功能的使用）

    整理了以前使用的几个笔记:上传到了github; python_notes 以后在慢慢更新吧:

  2. Hadoop平台常用配置及优化建议

    当发现作业运行效率不理想时,需要对作业执行进行性能监测,以及对作业本身.集群平台进行优化.优化后的集群可能最大化利用硬件资源,从而提高作业的执行效率.本文记录了在hadoop集群平台搭建以及作业运行过 ...

  3. html页面定位

    对于css中的position:relative;我始终搞不明白它是什么意思,有什么作用? 对于position的其它几个属性,我都搞懂了 引用 static : 无特殊定位,对象遵循HTML定位规则 ...

  4. NPOI 自定义单元格背景颜色-Excel

    NPOI针对office2003使用HSSFWorkbook,对于offce2007及以上使用XSSFWorkbook:今天我以HSSFWorkbook自定义颜色为例说明,Office2007的未研究 ...

  5. IIS下Asp.Net应用程序多进程设置及Session共享

    背景: 目前项目中在单个进程的应用程序经常会遇到w3c.exe崩溃的情况,于是就设想是否可以通过IIS多进程的方案来避免出现该问题. 于是搜了下“怎么实现多进程的方案”,找到了这篇文章:http:// ...

  6. leetcode pow(x,n)实现

    题目描述: 自己实现pow(double x, int n)方法 实现思路: 考虑位运算.考虑n的二进制表示形式,以n=51(110011)为例,x^51 = x^1*x^2*x^16*x^32,因此 ...

  7. Hihocoder 1059 String Matching Content Length

    预处理下连续相等的字符个数其实主要是看是否满3个 后面递推的时候特判下+1上次递推[i-1,j-1]不是来自[i-2,j-1]也不是来自[i-1,j-2]其实就是只来自[i-4,j-4]+3,和[i- ...

  8. （转）Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址, ...

  9. centOs安装jdk1.7

    1,下载jdk-7u75-linux-x64.tar.gz,地址http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloa ...

  10. BlogEngine2.9模仿yahoo滚动新闻Widget

    widget.ascx <%@ Control Language="C#" AutoEventWireup="true" CodeFile="w ...