原生js封装的轮播图

web前端 2019年02月22日 21:43 Norsl 1066 0

闲得发慌,就用原生js封装了个经常用的轮播图

只需要在html里面写上结构,然后引入js文件,最后执行方法就行了。css样式也不需要写,已经封装在js里面了。

常用的上下翻页,自动播放,播放间隔时间都弄好了,在初始化轮播图得时候传一个配置对象一切就都解决了。

需要多个轮播图的时候,只需写上html,然后实例化swiper传递配置参数就行了

本站首页就是用的这个,可以做个参考


Git地址:https://gitee.com/norsl/swiper


效果图


html结构

<style>
    .demo{
        width:50%;
        height:300px;
        background: red;
    }
    .swiper-item{
        font-size:30px;
        color:#fff;
        line-height: 300px;
        text-align: center;
        display: inline-block;
    }
</style>
<div class="demo">
    <div class="swiper-wrap">
        <div class="item-container">
            <div class="swiper-item" style="background:rgb(53, 197, 233);">Java</div>
            <div class="swiper-item" style="background:orangered;">C++</div>
            <div class="swiper-item" style="background:blueviolet;">Python</div>
            <div class="swiper-item" style="background:palevioletred;">PHP</div>
            <div class="swiper-item" style="background:rgb(219, 16, 84);">JavaScript</div>
            <div class="swiper-item" style="background:rgb(59, 230, 68);">ASP</div>
            <div class="swiper-item" style="background:rgb(209, 224, 74);">.NET</div>
        </div>
        <div class="swiper-index"></div>
        <div class="swiper-previous">&lsaquo;</div>
        <div class="swiper-next">&rsaquo;</div>
    </div>
</div>

<script>
window.onload = function(){
    // 获取swiper容器节点
    var swiperWrap = document.querySelector(".swiper-wrap");
    
    // 实例化swiper时候需要传递一个对象
    // 必选属性
    // -------- swiper容器节点
    // -------- auto:是否自动播放
    // 可选属性
    // -------- width:swiper容器宽度(默认父级元素的宽度,一般不需要设置)
    // -------- height:swiper容器高度(默认父级元素的高度,一般不需要设置)
    // -------- time:自动切换的时间(单位:秒。默认3秒)
    // -------- index:默认起始图片(默认1)
    var swiper = new Swiper({
        node: swiperWrap,
        auto: true,
        time:  5
    });
    
    swiper.start();
}
</script>


js文件

function Swiper(obj){
    if(!obj.node){
        console.log("需要一个swiper容器节点");
        return false;
    }
    
    // swiper宽,不传值的话默认父元素的宽度
    this.width = obj.width;
    // swiper高,不传值的话默认父元素的宽度
    this.height = obj.height;
    // 默认起始位置
    this.index = obj.index ? objx.index : 1;
    // 是否自动播放
    this.auto = obj.auto;
    // 自动播放间隔,单位:秒
    this.time = obj.time ? obj.time : 3;
    // 自动播放flag
    var autoFlag = null;
    
    
    // 获取swiper相关元素节点
    var swiperrWrap = obj.node;
    var swiperParent = swiperWrap.parentNode;
    var swiperUL = swiperWrap.querySelector(".item-container");
    var swiperIndex = swiperWrap.querySelector(".swiper-index");
    var items = swiperUL.querySelectorAll(".swiper-item");
    var nextBtn = swiperWrap.querySelector(".swiper-next");
    var previousBtn = swiperWrap.querySelector(".swiper-previous");
    
    
    // 下一页
    this.next = () => {
        this.index ++;
        if(this.index <= items.length){
            this.setPosition()
        }else{
            this.index = 1;
            this.setPosition()
        }
    }
    
    // 上一页
    this.previous = () => {
        this.index --;
        if(this.index <= 0){
            this.index = items.length;
            this.setPosition()
        }else{
            this.setPosition()
        }
    }
    
    // 设置ul离左边的距离
    this.setPosition = (index) => {
        if(index){
            this.index = index
        }
        swiperIndex.querySelectorAll('span')[this.index - 1].style.background = '#444444';
        if(this.index - 2 < 0){
            swiperIndex.querySelectorAll('span')[items.length - 1].style.background = '#FFFFFF';
        }else{
            swiperIndex.querySelectorAll('span')[this.index - 2].style.background = '#FFFFFF';
        }
        swiperUL.style.left = "-" + (this.index - 1) * this.width + "px";
    }
    
    // 设置自动播放
    var autoPlay = () => {
        if(this.auto){
            autoFlag = setInterval(this.next, this.time * 1000)
        }
    }
    
    var createIndex = () => {
        var indexNode;
        for(var i = 0; i < items.length; i ++){
            node = document.createElement("span");
            text = document.createTextNode("");
            node.appendChild(text);
            swiperIndex.appendChild(node);
        }
    }
    
    // 初始化css样式及事件
    var init = () => {
        if(this.width == undefined){
            this.width = swiperParent.offsetWidth
        }
    
        if(this.height == undefined){
            this.height = swiperParent.offsetHeight
        }
    
        // swiper容器样式
        swiperWrap.style.cssText = `
                    width: ${this.width}px;
                    height: ${this.height}px;
                    background: #f5f5f5;
                    position: relative;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                `;
    
        // item容器样式
        swiperUL.style.cssText = `
                    width = ${items.length * this.width}px;
                    position: absolute;
                    display: flex;
                    height:100%;
                    transition: all 1s;
                `;
        
        // 索引样式
        swiperIndex.style.cssText = `
                    position: absolute;
                    bottom:10px;
                    width:100%;
                    text-align: center;
                `;  
        for(var i of swiperIndex.querySelectorAll('span')){
            i.style.cssText = `
                            display: inline-block;
                            background:#fff;
                            padding: 6px;
                            margin:0 5px;
                            border-radius:50px;
                `;
        }
        
        // 下一项样式
        nextBtn.style.cssText = `
                    position: absolute;
                    right:-50px;
                    cursor:pointer;
                    text-indent: 3px;
                    color:#fff;
                    width:50px;
                    height:50px;
                    font-size:40px;
                    text-align: center;
                    line-height: 40px;
                    margin-top: 0;
                    border-radius:50px;
                    background: rgba(0, 0, 0, 0.5);
                    transition: all 0.2s;
                `;
    
        // 上一项样式
        previousBtn.style.cssText = `
                    position: absolute;
                    left:-50px;
                    cursor:pointer;
                    text-indent: -5px;
                    color:#fff;
                    width:50px;
                    height:50px;
                    font-size:40px;
                    text-align: center;
                    line-height: 40px;
                    margin-top: 0;
                    border-radius:50px;
                    background: rgba(0, 0, 0, 0.5);
                    transition: all 0.2s;
                `;
    
        for(var i of items){
            i.style.width = this.width + "px";
        }
    
        swiperWrap.onmouseover = function(){
            nextBtn.style.right = 5 + "px";
            previousBtn.style.left = 5 + "px";
            clearInterval(autoFlag);
        }
        swiperWrap.onmouseout = function(){
            autoPlay();
            nextBtn.style.right = -50 + "px";
            previousBtn.style.left = -50 + "px";
        }
    }
    
    
    // 开始
    this.start = () => {
        // 创建swiper索引
        createIndex();
        // 初始化css样式
        init();
        // 设置当前位置
        this.setPosition();
        // 设置按钮单击事件
        nextBtn.onclick = this.next;
        previousBtn.onclick = this.previous;
        
        autoPlay();
    }
}


说点什么吗?

你的电子邮箱地址不会被公开。必填项已用 * 著名

*
*
验证码

Norsl の 个人名片

职业:web开发

现居:四川 成都

Git:https://gitee.com/norsl

邮箱:3136904131@qq.com

最新评论

  • zgcwkj : 一样~~~
  • 萧瑟 : 可靠吗?
  • 小趣 : 这个目前没有尝试过
  • repostone : 从来没用过这些。
  • repostone : 顺便路过,留下一个足迹。
  • 林三 : 我也很久没有清理友链了,现在更新和回复好多哇!
  • 林三 : 我也好久没有清理友链了,现在更新和回复已经很忙了的说。
  • Norsl : 已经更新好了,就是访问你之前的域访问不到了。
  • 淡然若雅 : 换了新域名,有时间添加下。
  • Norsl : 这存款都是每个月工资里面抠出来的。哈哈哈