文档章节

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

上官清偌
 上官清偌
发布于 2017/04/22 17:14
字数 1049
阅读 74
收藏 1
点赞 0
评论 0

原生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
博文 85
码字总数 118519
作品 0
浦东
程序员
面向对象,更适合JavaScript

面向对象程序设计是软件开发中一个很庞大很复杂的话题,它并不是仅仅学会类、继承、封装、多态这些面向对象编程语法元素就表示掌握的,这些语法元素只是实现面向对象程序的工具, 就像砖块、...

陈宏鸿
05/07
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年
2017/11/13
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年1991
2017/11/13
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年
2017/11/20
0
0
js面向对象的一些初级知识总结~~

javascript作为一门解释性脚本语言,有着其独特的魅力.既具有函数编程的特性,又具有面向对象的特征.以前的开发中,大多是使用了javascript的函数式编程,最近,发现其的面向对象也有一定的优势,...

乔康007
2013/02/24
0
0
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0
React Native 与原生模块数据通信(一)(iOS)

(一)iOS日历模块封装演示 下面开始演示如何封装一个iOS日历原生模块,让JavaScript可以进行访问到iOS平台日历的功能。 在React Native中,原生模块就是一个Objective-C类,该实现了RCTBridge...

manofit
05/24
0
0
一个女生对BootStrap的感情

首先说明一下,姐我不是很聪明,但是也做设计,也做前端,同时在移动互联网行业中也混了多年,感触颇多,打算开始记录一下脚步,希望对后来的小弟弟×××们有那么一点帮助,也算一件高兴的事...

BootStrap之路
04/25
0
0
weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术
05/27
0
0
零基础的网站开发初学者如何系统的学习?

A.学习背景 开始网站开发,起先是从手机网站的UBB语法开始的,也因此有了深入学习的兴趣。为了让学习的热情膨胀,我有意的培养这一爱好 ,定位了自己要成为一名优秀的网站开发员的目标。 作为...

李佳顺
2012/12/25
0
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
32分钟前
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部