为什么我的button显示不了？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/slider.css">
</head>
<body>
<div id="slider" class="slider">
<div class="slider-item-container">
<div class="slider-item">
<a href="###" class="slider-link">
<img src="./img/1.jpg" alt="slider" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" class="slider-link">
<img src="./img/2.jpg" alt="slider" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" class="slider-link">
<img src="./img/3.jpg" alt="slider" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" class="slider-link">
<img src="./img/4.jpg" alt="slider" class="slider-img">
</a>
</div>
</div>
<button id="prev" type="button">prev</button>
<button id="next" type="button">next</button>
</div>
<script src="./js/transition.js"></script>
<script src="./js/slider.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
/* css reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
img {
vertical-align: top;
border: none;
}
button {
background-color: #007aff;
}
.slider {
overflow: hidden;
position: relative;
width: 100%;
height: 183px;
}
.slider-item-container,
.slider-item,
.slider-link,
.slider-img {
width: 100%;
height: 100%;
}
.slider-item-container {
/* 设置一行显示 */
display: flex;
transition: transform 0;
}
.slider-item {
/* 不压缩 */
flex-shrink: 0;
}
.slider-link {
display: block;
}
.slider-indicator-container {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.slider-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: lightgray;
opacity: 0.8;
margin-right: 8px;
}
.slider-indicator-active {
background-color: #007aff;
opacity: 1;
}
// 引用transition.js中的全局变量
var transition = window.sliderTransitionEnd;
// 使用了面向对象方式的写法
function Slider(ele, options) {
// 设置默认的options参数
var defaults = {
initIndex: 0, // 初始显示第几张幻灯片，从0开始
speed: 300, // 幻灯片的切换速度
hasIndicator: false // 是否需要指示器indicator
};
// 构造函数中的this指的是实例化对象 使用this. 可以在原型链上引用，用var定义只是局部变量，在原型链上找不到
// 判断用户是否传入参数，没有传就使用默认参数
this.options = {};
this.options.initIndex = typeof options.initIndex !== 'undefined' ? options.initIndex : defaults.initIndex;
this.options.speed = typeof options.speed !== 'undefined' ? options.speed : defaults.speed;
this.options.hasIndicator = typeof options.hasIndicator !== 'undefined' ? options.hasIndicator : defaults.hasIndicator;
// 获取需要用到的元素
this.ele = ele; // 原型链上都可以引用传进来的ele
this.itemContainer = ele.querySelector('.slider-item-container');
this.items = this.itemContainer.children;
this.perSlideDistance = this.items[0].offsetWidth; //获取一张幻灯片的宽度，（移动的距离就是幻灯片的索引值+1）*一张幻灯片的宽度
// 处理索引的范围
this.minIndex = 0;
this.maxIndex = this.items.length - 1; // 索引从0开始，length从1开始，所以-1
// this.index=this.options.initIndex; //初始化当前索引值，不做任何操作时当前显示的幻灯片索引值就是用户传进来第一张显示幻灯片的索引值。
// 但是用户不知道幻灯片张数，如果传了大于幻灯片张数的值，会出问题，要校正用户传入的initIndex的值
this.index = this._adjustIndex(this.options.initIndex);
// move是默认显示第一张幻灯片的函数，不带动画。但是to是带动画地切换幻灯片
this.move(this.getDistanceByIndex(this.index)); // 根据索引来移动幻灯片
// 如果用户设置显示indicator，创建indicator的html结构
if (this.options.hasIndicator) {
this._createIndicators();
// 设置indicator的高亮
this._setIndicatorActive(this.index);
}
}
// 切换到指定的幻灯片
Slider.prototype.to = function(index) {
// 改变当前的索引值为要切换到幻灯片的索引值
this.index = index;
this._setTransitionSpeed(this.options.speed);
this.move(getDistanceByIndex(this.index)); // 调用移动幻灯片的函数
// 保存指向实例化对象的this
var self = this;
// 幻灯片css3动画结束，设置过渡总时长变为0，使手指滑动不会一直延迟时间为用户设定的options中的speed时间
this.itemContainer.addEventListener(transition.end, function() {
self._setTransitionSpeed(0);
}, false);
// 设置指示器高亮
if (this.options.hasIndicator) {
this._setIndicatorActive(this.index);
}
};
// 切换上一张幻灯片
Slider.prototype.prev = function() {
this.to(this.index - 1);
};
// 切换到下一张幻灯片
Slider.prototype.next = function() {
this.to(this.index + 1);
};
// 校正用户传的索引值initIndex
Slider.prototype._adjustIndex = function(index) {
index = index < this.minIndex ? this.minIndex : index;
index = index > this.maxIndex ? this.maxIndex : index;
return index;
};
// 移动整体的幻灯片
Slider.prototype.move = function(distance) {
// 整体移动幻灯片容器 水平方向移动,y,z轴都为0
this.itemContainer.style.transform = 'translate3d(' + distance + 'px,0,0)';
};
// 通过当前的索引获取移动的距离
Slider.prototype.getDistanceByIndex = function(index) {
return -index * this.perSlideDistance;
};
// 创建indicator的html结构
Slider.prototype._createIndicators = function() {
var indicatorContainer = document.createElement('div'),
html = '';
indicatorContainer.className = 'slider-indicator-container';
for (var i = 0; i <= this.maxIndex; i++) {
html += '<span class="slider-indicator"></span>';
}
indicatorContainer.innerHTML = html;
this.ele.appendChild(indicatorContainer);
};
// 设置indicator的高亮
Slider.prototype._setIndicatorActive = function(index) {
this.indicators = this.indicators || this.ele.querySelectorAll('.slider-indicator'); //获取过就不需要再操作DOM获取
for (var i = 0; i < this.indicators.length; i++) {
// 移除所有的高亮的class
this.indicators[i].classList.remove('slider-indicator-active');
}
// 对当前的幻灯片的indicator加高亮
this.indicators[index].classList.add('slider-indicator-active');
};
Slider.prototype._setTransitionSpeed = function(speed) {
// 在css样式中对slider-item-container设置了transition，改变它的总时长
this.itemContainer.style.transitionDuration = speed + 'ms';
};
(function() {
var transitionEventName = { //各浏览器支持transitionend的写法
transition: 'transitionend',
MozTransition: 'transitionend',
WebkitTransition: 'webkitTransitionEnd',
OTransition: 'oTransitionEnd otransitionend'
};
var transitionEnd = '',
isSupport = false;
for (var name in transitionEventName) {
var ele = document.body || document.documentElement;
if (ele.style[name] !== 'undefined') {
transitionEnd = transitionEventName[name];
isSupport = true;
break;
}
}
// 定义一个全局变量sliderTransitionEnd变量
window.sliderTransitionEnd = window.sliderTransitionEnd || {}; //第一次创建就为空对象，之后就引用创建的对象
window.sliderTransitionEnd.transition = { //为全局变量指向的对象添加transition属性
end: transitionEnd, //添加属性值，引用局部变量
isSupport: isSupport
};
})();
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星