<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>图片点击滑动</title>
<style>
body{padding: 0;margin: 0;}
li,ol,ul{margin: 0;list-style: none;padding: 0;}
div#l-btn{left: 0;color: gray;}
div#r-btn{right: 0;color:brown;cursor: pointer;}
.nav-container{position: relative;width: 98%;height:10em;overflow: hidden;margin: 2em auto;}
.nav{position: absolute;top: 0;left:0;}
.nav li{float: left;width:8em;text-align: center;}
.nav li img{width: 100%;height: auto;}
.nav span{font-size: 1.6em;}
</style>
</head>
<body>
<div class="nav-container">
<ul class="nav" id="nav">
<li><img src="img/hb1.jpg" /><br/><span>1</span></li>
<li><img src="img/hb2.jpg" /><br/><span>2</span></li>
<li><img src="img/hb3.jpg" /><br/><span>3</span></li>
<li><img src="img/hb4.jpg" /><br/><span>4</span></li>
<li><img src="img/hb2.jpg" /><br/><span>5</span></li>
<li><img src="img/hb3.jpg" /><br/><span>6</span></li>
<li><img src="img/hb4.jpg" /><br/><span>7</span></li>
<li><img src="img/hb2.jpg" /><br/><span>8</span></li>
</ul>
</div>
<script>
window.onload=function(){
var UcanSlide=function(ele,config){
this.config=config||{};
this.wrap=document.querySelector(ele);
this.ul_wrap=this.wrap.querySelector(‘ul‘);
this.ul_wrap.innerHTML+=this.ul_wrap.innerHTML;
this.oli=this.ul_wrap.querySelectorAll(‘li‘);
this.len=this.oli.length;
this.marginRight=this.config.marginRight||15;//设置li标签的右边距
this.autoScroll=this.config.autoScroll||true;//设置容器的滚动状态
this.scrollSpeed=this.config.scrollSpeed||60;//设置定时器时间（单位毫秒）
this.scrollStep=this.config.scrollSpeed||2;//设置容器滚动的步长
this.setTime = null;
this.warp_width=this.wrap.offsetWidth;
this.ul_wrap_width=0;
this.startX=0;//记录手指拖动的距离
this.dirX=0;//记录移动的距离
this.T=this;
this.init();
}
UcanSlide.prototype.init=function(){
var _this=this;
for(var i=0;i<this.len;i++){
this.oli[i].style.marginRight=this.marginRight+‘px‘;
this.ul_wrap_width+=(this.oli[i].offsetWidth+this.marginRight);
}
this.ul_wrap.style.width=this.ul_wrap_width+‘px‘;
if(this.autoScroll){
//执行无缝滚动
this.setTime=setInterval(function(){
_this.move();
},this.scrollSpeed);
}
this.ul_wrap.addEventListener(‘touchstart‘,function(e){
_this.touchStart(e);
},false);
this.ul_wrap.addEventListener(‘touchmove‘,function(e){
_this.touchMove(e);
},false);
this.ul_wrap.addEventListener(‘touchend‘,function(e){
_this.touchEnd(e);
},false);
// this.ul_wrap.addEventListener(‘touchstart‘,_this.touchStart,false);
// this.ul_wrap.addEventListener(‘touchmove‘,_this.touchMove,false);
// this.ul_wrap.addEventListener(‘touchend‘,_this.touchEnd,false);
}
UcanSlide.prototype.move=function(){
if(this.autoScroll){
//自由滚动状态（自右向左）
this.dirX=this.dirX-this.scrollStep;
if(this.dirX<-this.ul_wrap_width/2||this.dirX>0){
this.dirX=0;
}
}else{
//拖动状态
if(this.dirX<-this.ul_wrap_width/2){
this.dirX=0;
}else if(this.dirX>=0){
this.dirX=-this.ul_wrap_width/2;
}
}
this.ul_wrap.style.webkitTransform=‘translate3d(‘+this.dirX+‘px,‘+‘0px,0px)‘;
};
UcanSlide.prototype.touchStart=function(e){
e.preventDefault();
clearInterval(this.setTime);
this.startX=e.targetTouches[0].clientX;
};
UcanSlide.prototype.touchMove=function(e){
e.preventDefault();
this.autoScroll=false;
this.dirX+=e.targetTouches[0].clientX-this.startX;
this.startX=e.targetTouches[0].clientX;
this.move();
};
UcanSlide.prototype.touchEnd=function(e){
var _this=this;
this.autoScroll=true;
this.setTime=setInterval(function(){
_this.move();
},this.scrollSpeed);
};
new UcanSlide(‘.nav-container‘);
}
</script>
</body>
</html>
效果演示：
时间： 2024-08-29 10:13:15