文档章节

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

上官清偌
 上官清偌
发布于 2017/04/22 17:14
字数 1049
阅读 86
收藏 1

原生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));

© 著作权归作者所有

共有 人打赏支持
上官清偌
粉丝 11
博文 87
码字总数 123671
作品 0
浦东
程序员
私信 提问
手把手教你封装JavaScript插件

我们可能已经用过很多JS插件,比如著名的轮播图插件Swiper.js,滚动条插件iScroll.js等等,用起来非常方便,大大提高了我们的工作效率。那么它们基本实现原理是怎样的呢?我们又该如何DIY一个...

前端王睿
08/29
0
0
手把手教你用原生JavaScript造轮子(2)——轮播图

通过上一篇文章的学习,我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图,希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Let's ...

csdoker
08/12
0
0
如何用面向对象的思维去封装一个小型轮播图插件

1、面向对象与面向过程 既然说到面向对象的思维,那就免不了要对面向过程的编程思维与面向对象的思维做一番比较。 笔者有 一段时间天真的认为有一个类,然后new一个对象就是面向对象编程了,...

余大彬
08/08
0
0
封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放。本篇文章的主要目的是分享封装插件的思路。 轮播图的我一开始是写成非插件形式实现的效...

daisy,gogogo
08/18
0
0
记一个JavaScript图片轮播思路与代码

说在前头 喜欢并学习前端,一路摸爬滚打过来,现在算算也快满一年的,每天或多或少都会来“拜读”大家的写的文章,学习与感悟了不少,作为一名要变的更强的前端小哥哥,在这个节点上,也想写...

柚子先生
08/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

线下工坊|Blockchain Coding Day:零基础教你开发DAPP(北京)

我们的目标是通过编程学习让你更了解区块链技术。这将对区块链开发初学者一次很好的体验。这里需要强调一下,编程零基础也能学会。 我们将以小组的形式,由教练带领学员完成DAPP开发。每位学...

HiBlock
22分钟前
2
0
查看内存情况

jinfo:可以输出并修改运行时的java 进程的opts。 jps:与unix上的ps类似,用来显示本地的java进程,可以查看本地运行着几个java程序,并显示他们的进程号。 jstat:一个极强的监视VM内存工具。...

Canaan_
22分钟前
2
0
基于对象特征的推荐

(本实验选用数据为真实电商脱敏数据,仅用于学习,请勿商用) 在上一期基于协同过滤的的推荐场景中,我们介绍了如何通过PAI快速搭建一个基于协同过滤方案的推荐系统,这一节会介绍一些如何基...

阿里云官方博客
30分钟前
1
0
Ugly Number(leetcode263)

Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers whose prime factors only include 2, 3, 5. Example 1: Input: 6Output: true......

woshixin
54分钟前
2
0
深度模型从研者 眼里的 似然估计 & Hessain 海森矩阵 & Fisher Information (费雪信息)

深度模型的训练的基本依据是最小化模型拟合数据的误差。旨在不仅知其然(如何构建和训练一个深度模型),还应知其所以然(为什么这样训练,可以做哪些优化)。我们就会发现,有很多研究者,在...

刘小米_思聪
58分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部