滑动效果完全没有再次提问
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"> <link rel="stylesheet" href="css/slider.css"> <title>无标题文档</title> </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> <span class="slider-indicator"></span> </div> --> </div> <button id="prev">prev</button><button id="next">next</button> <script src="js/hammer.min.js"></script> <script src="js/3slider-end.js"></script> <script src="js/4tuodong.js"></script> </body> </html>
/*css reset*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
img {
border: none;
vertical-align: top;
}
a {
-webkit-tap-highlight-color: transparent;
}
/*slider*/
.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;
background-color: #000;
opacity: 0.2;
border-radius: 50%;
margin-right: 8px;
}
.slider-indicator-active {
background-color: #007aff;
opacity: 1;
}// JavaScript Document
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.options.initIndex;//如：这样写，当用户写的值为10，就会出错
this.index=this._adjustIndex(this.options.initIndex);
this.move(this.getDistanceByIndex(this.index));//调用移动函数移动幻灯片
//为了在初始化时，将图片移动到对应的需要显示的图片位置，例如：初始传入index的值1， 那么打开页面默认显示就是第二张图片
if(this,options.hasIndicator){//根据用户的需求判断是否创建指示器，并进行切换
this._createIndicators();
this._seteIndicatorActive(this.index);
}
}
Slider.prototype.to=function(index,cb){//带有动画的切换
this.index=this._adjustIndex(index);
this._setTransitionSpeed(this.options.speed);
this.move(this.getDistanceByIndex(this.index));//调用移动函数移动幻灯片
var self=this;
this.itemContainer.addEventListener('transitionend',function(){
self._setTransitionSpeed(0);
if(typeof cb==='function'){//方便外面设置标识位，防止触摸事件2个都触发
cb();
}
},false);
/*不设置self._setTransitionSpeed(0);时，slider-item-container上的transition-duration一直是300ms，导致你拖动图片时，图片并不是立即跟着鼠标进行移动，而是在300ms内慢慢的跟着鼠标移动。*/
/*添加self._setTransitionSpeed(0);后，每次移动完一张图片，都会将transition-duration设置为0 ，那么在下一次拖动拖动图片时，会立即跟着鼠标进行移动，效果实现会更好。*/
if(this.options.hasIndicator){
this._seteIndicatorActive(this.index);
}
};
Slider.prototype._setTransitionSpeed=function(speed){//设置transition的速度
this.itemContainer.style.transitionDuration=speed+'ms';
};
Slider.prototype.prev=function(cb){//上一张按钮点击执行的函数
this.to(this.index-1,cb);
};
Slider.prototype.next=function(cb){//下一张按钮点击执行的函数
this.to(this.index+1,cb);
};
//在左右切换过程中，调用的是to方法，而to方法内部调用了_setTransitionSpeed方法，所以会有动画效果
Slider.prototype._adjustIndex=function(index){//处理索引的函数，防止索引出错
if(index<this.minIndex){
index=this.minIndex;
}else if(index>this.maxIndex){
index=this.maxIndex;
}
return index;
};
Slider.prototype.move=function(distance){//移动函数，给出距离，然后移动
this.itemContainer.style.transform='translate3d('+distance+'px,0,0)';
};
Slider.prototype.getDistanceByIndex=function(index){//根据索引值计算移动距离
return -index*this.distancePerSlide;
};
Slider.prototype._createIndicators=function(index){//创建小圆点，即指示器
var indicatorContainer=document.createElement('div');
var html="";
indicatorContainer.className="slider-indicator-container";
for(var i=0;i<this.maxIndex+1;i++){
html+='<span class="slider-indicator"></span>';
}
indicatorContainer.innerHTML=html;
this.el.appendChild(indicatorContainer);
};
Slider.prototype._seteIndicatorActive=function(index){//切换小圆点
this.indicator=this.indicator||this.el.querySelectorAll('.slider-indicator');//短路操作符是为了防止每次触发_seteIndicatorActive都进行获取，浪费性能
for(var i=0;i<this.indicator.length;i++){
this.indicator[i].classList.remove('slider-indicator-active');
}
this.indicator[index].classList.add('slider-indicator-active');
};
Slider.prototype.getItemContainer=function(){//向外返回itemContainer
return this.itemContainer;
};
Slider.prototype.getIndex=function(){//向外返回index
return this.index;
};
Slider.prototype.getDistancePerSlide=function(){//向外返回distancePerSlide,即一张图片的宽度
return this.distancePerSlide;
};
var slider=new Slider(document.getElementById('slider'),{
initIndex:2,
speed:300,
hasIndicator:true
},false);
document.getElementById('prev').addEventListener("click",function(){
slider.prev();
},false);
document.getElementById('next').addEventListener("click",function(){
slider.next();
},false);// JavaScript Document
var hammer=new Hammer(slider.getItemContainer());
var isSwiping=false;//防止手指滑动时，同时触发pan和swipe
hammer.on('panmove',function(event){
var distance=event.deltaX+slider.getDistanceByIndex(slider.getIndex);
slider.move(distance);
});
hammer.on('panend',function(event){
if(isSwiping)return;
var distance=event.deltaX+slider.getDistanceByIndex(slider.getIndex);
var index=getIndexByDistance(distance);
slider.to(index);
});
//根据容器的距离确定索引
function getIndexByDistance(distance){
if(distance>0){
return 0;
}else{
return Math.round(-distance/slider.getDistancePerSlide());//四舍五入确定索引值
}
}
hammer.on('swipeleft',function(event){
isSwiping=true;
slider.next(function(){
isSwiping=false;
});
});
hammer.on('swiperight',function(event){
isSwiping=true;
slider.prev(function(){
isSwiping=false;
});
});19
收起
正在回答
2回答
同学你好，是如下这个报错吗？
这个是因为索引index没有获取到导致的。是因为如下，应该是getIndex()。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
相似问题
上下滑动与左右滑动
0
0
2
老师，为什么我的代码没有效果？
16
0
5
zoom:100%显示不完全
0
0
5
为什么我这个代码没有动画效果
1
0
4
mouseout监听滑动门会失效
5
0
3
登录后可查看更多问答，登录/注册
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星