我发现轮播在很多网站里面都用到过，一个绚丽的轮播可以为网页增色不少，最近闲来无事，也用原生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. length属性，length()方法和size()的方法的区别

    一.java 1.length属性是针对Java中的数组来说的,要求数组的长度可以用其length属性: 2.length()方法是针对字符串来说的,要求一个字符串的长度就要用到它的length()方 ...

  2. sql中datetime 和 timestamp

    datetime 1.允许为空值,可以自定义值,系统不会自动修改其值. 2.不可以设定默认值,所以在不允许为空值的情况下,必须手动指定datetime字段的值才可以成功插入数据. 3.虽然不可以设定默 ...

  3. MySQL查询出错提示 --secure-file-priv解决方法

    原文 在某台DB上准备运行一个SQL语句,就是用SELECT INTO OUTFILE把查询结果写入到文件的时候提示以下信息: The MySQL server is running with the ...

  4. php 截取代码方法（140个字后的。）

    //截取摘要public static function mbsubstr($str){    $strleng = mb_strlen($str,"utf8");    $mbs ...

  5. Windows Phone 十九、罗盘

    磁力计概述 拥有磁力计硬件支持的设备可以根据磁力计来确定相对于北极的角度 磁力计的访问 API 定义在 Compass 类中 调用方式和加速计类似 <Grid Background=" ...

  6. 非常简单的数据，支持excel表格下载功能

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  7. 谁也无法挡住我访问Google---使用Nginx反向代理攻略

    展示最终成果: 浏览器打开​ http://www.manda13.com/(慢搭搜索)这个是自己搭建的百度网盘搜索,欢迎测试 点击右上角“原版Google”,就可以访问Google. 是不是很方便. ...

  8. 日常总结——JSP篇（补）

    序—— 初次接触JSP,写一个登录注册界面 正文—— JSP介绍:JSP通过在标准的HTML页面中插入java代码,其静态的部分无须java程序控制.每个JSP页面就是一个servlet实例, WEB ...

  9. Warning: Using a password on the command line interface can be insecure.解决办法

    被一个小朋友问到,直接公布答案: If your MySQL client/server version is a 5.6.x a way to avoid the WARNING message a ...

  10. module not exists: xxxx Error in ThinkPHP

    Introduction ThinkPHP is a very charming PHP framework to easily build a website. It's structured in ...