前端那些事之原生js--面向对象封装轮播图

最新推荐文章于 2022-09-17 10:17:14 发布

weixin_34178244

最新推荐文章于 2022-09-17 10:17:14 发布

阅读量174

点赞数

文章标签：前端 python 操作系统 ViewUI

原文链接：https://my.oschina.net/yongxinke/blog/885109

版权

2019独角兽企业重金招聘Python工程师标准>>>

原生js 封装轮播图

html页面

<div class="focus" id="foucus">
    <ul class="focuspic" id="slidePic">
        <li><a href="#" target="_blank"><img src="img/banner1.png"/></a></li>
        <li><a href="#" target="_blank"><img src="img/banner2.png" /></a></li>
        <li><a href="#" target="_blank"><img src="img/banner3.png" /></a></li>
    </ul>
</div>


<!--
<div class="轮播图">
	<div class="图片列表">
		<div class="图片项目"></div>
	</div>
	<div class="图片焦点">
		<div class="焦点项目"></div>
	</div>

</div>

轮播图：
1、宽度自适应,
2、将图片设置为背景
3、为了方便程序后期修改,直接把标签重新绘制（图片和焦点）
4、布局写好、选中加状态

步骤：
1、画结构
2、鼠标经过焦点改变图片
3、自动轮播
4、鼠标经过停止自动播放，离开启动自动播放（注意离开的div是最外层）

无缝轮播
逻辑：一直重复播放，而且不重复不返回

1、首先把最外面层设置宽度：总宽度 = (单个元素的宽度+padding+border+margin)*个数
2、设置里面的元素float:left或right（不需要设置定位）
3、走动起来：直接操作最外面的层，操作margin-left或left都可以，走动距离就是单个元素的宽度+padding+border+margin，就可以走动起来了
4、复制一个元素，到最后一个的时候，再把第一组元素放到复制的后面来，那么整个流程到此结束
-->

css样式

@charset "utf-8";
.focus {
    height: 400px;
    overflow: hidden;
    position: relative;
}

.focus .slide-box div {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: red;
    transition: all .5s;
    opacity: 0;
    /*兼容ie8*/
    filter: alpha(opacity=0);
}

.focus .slide-box div.active {
    z-index: 1;
    opacity: 1;
    /*兼容ie8*/
    filter: alpha(opacity=100);
}

.focus .slide-focus {
    position: absolute;
    left: 50%;
    bottom: 25px;
    height: 25px;
    z-index: 2;
    cursor: pointer;

}

.focus .slide-focus span {
    width: 12px;
    height: 12px;
    background: rgba(0, 0, 0, 0.2);
    float: left;
    margin-right: 20px;
    border: 1px solid #eee;
    transition: all .3s;
}

.focus .slide-focus span.on {
    background: #f00;
    border-color: #f00;
}

js调用

<script src="js/slider.js"></script>
<script>
window.onload=function () {
    slider.init;
}
</script>

js封装

(function (window, undefind) {
    "use strict";
    function Slider(obj) {
        //    初始化
        this.init(obj);
    }
    Slider.prototype = {
        construct: Slider,
        init: function (obj) {
            this.timer = null;
            var initParam = {
                //获取所有li
                "slideLi": document.getElementById("slidePic").children
            }
            // console.log(initParam);
            //    判断是手机还是电脑打开，初始化一下
            if (!this.isPhone()) {
                this.phoneSlide(initParam)
            } else {
                this.computerSlide(initParam);
            }
        },
        //手机端初始化
        phoneSlide: function () {
            alert(2)
        },
        //电脑端初始化
        computerSlide: function (param) {
            var _this = this,
                foucus = document.getElementById("foucus"),
                divEle = document.createElement("div"),//创建一个图片列表
                divFoucus = document.createElement("div");//创建一个图片交点列表
            divEle.className = 'slide-box';
            divFoucus.className = 'slide-focus'
            console.log(this + "111");
            //遍历所有的li
            for (var i = 0; i < param.slideLi.length; i++) {
                // console.log(param.slideLi);
                var slideItem = document.createElement("div"),//创建图片项目
                    foucusItem = document.createElement("span");//创建交点元素（span）
                //设置标记
                foucusItem.setAttribute("data-index", i);
                if (i == 0) {
                    //默认情况下第一个是被选中的
                    slideItem.className = 'active';
                    foucusItem.className = 'on';
                }
                //焦点划过去的时候,不能用onmousemove

                foucusItem.onmouseover = function () {
                    if (this.className.indexOf("on") < 0) {
                        //获取当前的第几个
                        //注意这里一定要用this.getAttribute("data-index")
                        // alert(this.getAttribute("data-index"))
                        divFoucus.getElementsByClassName("on")[0].className = '';//把第一个焦点清空
                        this.className = 'on';//设置当前的状态
                        divEle.getElementsByClassName("active")[0].className = '';//清空默认的
                        divEle.children[this.getAttribute("data-index")].className = "active";
                    }

                }
                //获取所有图片元素
                // querySelectorAll("img")[0];
                slideItem.style.backgroundImage = "url(" + param.slideLi[i].querySelectorAll("img")[0].getAttribute("src") + ")";//图片路径
                divEle.appendChild(slideItem);//获得存储图片的列表box
                divFoucus.appendChild(foucusItem);
            }
            //先移除ul
            document.getElementById("slidePic").remove();
            //关闭定时器
            foucus.appendChild(divEle);
            foucus.appendChild(divFoucus);
            foucus.onmousemove = function () {
                clearTimeout(_this.timer);
            }
            //离开时重新调用一下
            foucus.onmouseout = function () {
                _this.autoPlay();
            }
            //要调用一下自动播放
            this.autoPlay();
        },
        //    判断用户信息
        isPhone: function () {
            var userAgentInfo = navigator.userAgent;
            // console.log(userAgentInfo);
            var agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];//系统名字
            var flag = true;//是否包含状态
            for (var i = 0; i < agents.length; i++) {
                //判断是否包含用户名
                if (userAgentInfo.indexOf(agents[i]) > 0) {
                    //已经找到了
                    flag = false;
                    break;
                }
                return flag;
            }

        },
        autoPlay: function () {
            /*
             1、获取当前是第几个
             2、获取总共有多少个
             3、匹配如果当前是最后一个，那么下一个就是第一个
             4、调用定时器自动执行（setInterval有Bug，长期调用，可能会导致越来越快）
             */
            var _this = this;
            this.timer = setTimeout(function () {
                //获取所有的图片
                var silderBox = document.getElementsByClassName("slide-box")[0].children;
                //获取所有的交点
                var silderFocus = document.getElementsByClassName("slide-focus")[0].children;
                //获取当前焦点
                var currFocus = Number(document.getElementsByClassName("slide-focus")[0].getElementsByClassName("on")[0].getAttribute("data-index"));
                silderBox[currFocus].className = '';
                silderFocus[currFocus].className = '';
                if ((silderBox.length - 1) <= currFocus) {
                    silderBox[0].className = 'active';
                    silderFocus[0].className = 'on';
                } else {
                    silderBox[currFocus + 1].className = 'active';
                    silderFocus[currFocus + 1].className = "on";
                }
                _this.autoPlay();
            }, 1000)

        }

    }
    window['slider'] = new Slider;
}(window));

转载于:https://my.oschina.net/yongxinke/blog/885109