我发现轮播在很多网站里面都用到过，一个绚丽的轮播可以为网页增色不少，最近闲来无事，也用原生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. c++中vector的用法详解

    c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...

  2. Android四大核心组件之Service

    实验内容 启动Service 绑定Service 与Service进行通信 实验要求 启动Service 绑定Service 与Service进行通信 实验步骤 Service概述 Service通常 ...

  3. VitualBox环境下，实现windows系统与虚拟机Linux文件互传

    本次环境是Win7系统和ubuntu14(虚拟机) 1.首先需要安装VitualBox的增强功能,如图所示 2.安装完成后重启linux系统,然后在WIN7系统下创建共享文件夹(本文在D盘下创建名为V ...

  4. 鸟哥linux私房菜基础篇

    1)注销:exit2)指令太长:命令太长的时候,可以使用反斜杠 (\) 来跳脱[Enter]符号,使挃令连续到下一行3)系统语言显示和设置命令:echo $LANG,显示当前系统语言:简体中文zh_C ...

  5. iptables参数详解

    iptables参数详解 搬运工:尹正杰 注:此片文章来源于linux社区. Iptalbes 是用来设置.维护和检查Linux内核的IP包过滤规则的. 可以定义不同的表,每个表都包含几个内部的链,也 ...

  6. jQuery EasyUI 使用笔记

    大家有四次抢票机会.第一次是放票时间之后的30分钟.第二次机会是开车前的15天.第三个机会是开车前的48小时.第四个机会是开车前的24小时. $("#gys_key").combo ...

  7. android 流量 压缩

    引用:http://my.eoe.cn/blue_rain/archive/340.html 对于目前的状况来说,移动终端的网络状况没有PC网络状况那么理想.在一个Android应用中,如果需要接收来 ...

  8. c#-冒泡排序-算法

    冒泡排序(Bubble Sort) 冒泡排序算法的运作如下: 1.比较相邻的元素.如果第一个比第二个大,就交换他们两个. 2.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后 ...

  9. 夺命雷公狗-----React---22--小案例之react经典案例todos（完成数据的遍历）

    在很多前端框架中todos都是一个小的参考例子,在react中当然也是不例外的,先来看看最终的效果先... 这个就是官方的例子,我们先来分析下他是由那及格组建组合成的... 再来分析下他是的数据最终是 ...

  10. 在 Windows 10 中启用 Windows Photo Viewer

    本文版权归cxun所有,如有转载请注明出处与本文链接,谢谢!原文地址:http://www.cnblogs.com/cxun/p/4727323.html 不知大家在使用了Win10之后有没有这样感受 ...