this.to is not a function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幻灯片</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 class="slider-item">
<a href="###" class="slider-link">
<img src="img/5.jpg" alt="slider" class="slider-img">
</a>
</div>
</div>
<!-- <div class="slider-indicator-container">
<span class="slider-indicator"></span>
<span class="slider-indicator"></span>
<span class="slider-indicator"></span>
<span class="slider-indicator"></span>
</div> -->
</div>
<button id="prev">prev</button>
<button id="next">next</button>
<script>
function Slider(el,options){
var defaults = {
initIndex:0,
speed:300,
hasIndicator:false
}
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.el = el;
this.itemContainer = el.querySelector(".slider-item-container");
this.items = this.itemContainer.children;
this.distancePerSlide = this.items[0].offsetWidth;
this.minIndex = 0;
this.maxIndex = this.items.length - 1;
// _ 表示私有 仅供内部使用
this.index = this._adjustIndex(this.options.initIndex);
this.move(this.getDistanceByIndex(this.index));
//是否创建导向点
if(this.options.hasIndicator){
this._createIndicators();
this._setIndicatorActive(this.index);
}
}
Slider.prototype.to = function(index){
this.index = index;
this.move(this.getDistanceByIndex(this.index));
}
Slider.prototype.prev = function(){
this.to(this.index-1);
}
Slider.prototype.next = function(){
this.to(this.index+1);
}
//对起始数值进行处理 成为有效值
Slider.prototype._adjustIndex = function(index){
if(index < this.minIndex){
index = this.minIndex;
}else if(index >this.maxIndex){
index = tis.maxIndex;
}
return index;
}
//移动 没有transition的移动 用于初始切换首页图
Slider.prototype.move = function(distance){
this.itemContainer.style.transform = 'translate3d('+ distance +'px,0,0)';
}
//获取移动距离
Slider.prototype.getDistanceByIndex = function(index){
return -index * this.distancePerSlide;
}
//js创建indicatorhtml内容
Slider.prototype._createIndicators = function(){
var indicatorContainer = document.createElement('div');
var html = "";
for(var i=0;i<=this.maxIndex;i++){
html += '<span class="slider-indicator"></span>';
}
indicatorContainer.className = 'slider-indicator-container';
indicatorContainer.innerHTML = html;
this.el.appendChild(indicatorContainer);
}
//点亮当前slider的indicator
Slider.prototype._setIndicatorActive = function(index){
//获取所有的导标 有值就不再重复获取
this.indicators = this.indicators || this.el.querySelectorAll('.slider-indicator');
for(var i=0;i<this.indicators.length;i++){
this.indicators[i].classList.remove('slider-indicator-active');
}
this.indicators[index].classList.add('slider-indicator-active');
}
</script>
<script>
var sliderEl = document.getElementById('slider');
var slider = new Slider(sliderEl,{
initIndex:0,
speed:300,
hasIndicator:true
})
prev.onclick = slider.prev;
next.onclick = slider.next;
</script>
</body>
</html>
正在回答
同学你好，是this的指向不对，按照同学的写法，this指向的是按钮。可以修改为下方的写法，让this指向slider
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星