2019独角兽企业重金招聘Python工程师标准>>> 
原生js 封装轮播图
html页面
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调用
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));