我发现轮播在很多网站里面都用到过，一个绚丽的轮播可以为网页增色不少，最近闲来无事，也用原生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. Mysql查看版本，端口命令

    有一段时间没有鼓捣TP了,今天又再复习一下.在Model获取数据的时候提示'MySQL server has gone away'错误,一开始以为是TP问题,还查了半天,后来才发现是配置mysql的时 ...

  2. LazyMan的Promise解法

    背景 见上一篇. 面向对象的链式调用中,掺杂了 一个一部动作, 对于这种工作链, 是非同步执行的链. LazyMan("Hank").sleep(1).eat("dinn ...

  3. 分享一组矢量图标–UX图标字体库

    以下内容转自:http://ux.etao.com/,原文链接:http://ued.alimama.com/posts/219 科技日新月异的今天,市面上各种分辨率.各种显示精度的显示设备层出不穷, ...

  4. TCP/IP、Http、Socket的区别

    1.标准网络层次 网络由下往上分为:物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 下面的图表试图显示不同的TCP/IP和其他的协议在最初OSI模型中的位置: 7 应用层 例如HTTP. ...

  5. MWeb 2.0 测试版可以下载啦，这次是公开测试，感兴趣的朋友可以试试

    2.0 版是 MWeb 发布以来,最重要的一个版本.MWeb 自去年一月份发布以来,获得了很多朋友的建议,在此非常感谢!没有你们,2.0 版可能就不能出来!然后再次感谢 Producter: http ...

  6. DataTable 转 List<T>

    最近在做一个项目,表的数据巨多,而且表的字段一般都在30个以上.公司规定不能用Nhibernate以及ef等ORM框架. 所以查询绑定时的工作量极为痛苦.没有办法,自己写了个DataTableToLi ...

  7. LA 3942 - Remember the Word （字典树 + dp）

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  8. android adb命令

    adb查看logcat adb logcat <TAG>:* *:S 查看指定TAG的Log adb查看最上层activity:linux: adb shell dumpsys activ ...

  9. JAVA反射参数传递

    引用:http://fish2700.blog.163.com/blog/static/130713192009103035723281/ 使用Method反射调用函数时,我们通常会遇到以下几种情况: ...

  10. Given a code_combination_id how can i get the code description? 获取科目组合描述

    SELECT c.code_combination_id, c.concatenated_segments, apps.fa_rx_flex_pkg.get_description(101 -- p_ ...