提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

使用原生js写的一个简单slider

JS 使用 简单 一个 原生 slider
2023-06-13 09:15:25 时间
复制代码代码如下:

<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<styletype="text/css">
body,div,ul,li{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
aimg{
border:none;
}
.wrap{
width:100%;
overflow:hidden;
position:relative;
}
.wrap.prev,
.wrap.next{
height:320px;
position:absolute;
left:-50%;
top:0;
background-color:#999;
opacity:0.7;
width:100%;
}
.wrap.next{
left:auto;
right:-50%;
}
.wrap.prev:hover,
.wrap.next:hover{
opacity:0.5;
}
.container{
width:100%;
height:320px;
}
.containerul{
height:100%;
}
.containerli{
width:1000px;
height:100%;
float:left;
}
.containerlia,
.containerliimg{
display:block;
width:100%;
height:100%;
}
.page{
position:absolute;
left:50%;
bottom:10px;
display:none;
}
.pagespan{
float:left;
margin-right:10px;
width:20px;
height:20px;
display:block;
cursor:pointer;
background:#999;
border-radius:50%;
text-align:center;
color:#fff;
}
.page.select{
background:#f00;
}
</style>
</head>
<body>
<divclass="wrap">
<divclass="container"id="container">
<ul>
<li><ahref="1"><imgsrc="http://www.hengqijy.com/uploadfile/2013/1031/20131031084228263.jpg"></a></li>
<li><ahref="2"><imgsrc="http://www.hengqijy.com/uploadfile/2014/0315/20140315023711196.jpg"></a></li>
<li><ahref="3"><imgsrc="http://www.hengqijy.com/uploadfile/2014/0228/20140228091207797.jpg"></a></li>
<li><ahref="4"><imgsrc="http://www.hengqijy.com/statics/images/new_img/ksss.jpg"></a></li>
</ul>
</div>
<divclass="prev"id="prev"></div>
<divclass="next"id="next"></div>
<divid="page"class="page"></div>
</div>
<scripttype="text/javascript">
/*
*Sliderconstructor
*@param{Node}ele容器节点
*@param{Int}index默认显示第几张
*/
varSlider=function(ele){
this.ele=ele;
this.oList=ele.children[0];
this.items=this.oList.getElementsByTagName("li");
this.itemWidth=parseInt(this.items[0].offsetWidth,10);
this.page=document.getElementById("page");
this.prevBtn=document.getElementById("prev");
this.nextBtn=document.getElementById("next");
this.init();
}
Slider.prototype={
constructor:Slider,
init:function(){
this.oList.style.position="absolute";
this.oList.style.top=0;
this.oList.style.left=0;

this.going=0;
this.current=1;
this.speed=100;
this.timer=null;
this.wrapWidth=parseInt(this.ele.offsetWidth,10);
this.pageCircles=null;

this.prevBtn.style.marginLeft=-this.itemWidth/2+"px";
this.nextBtn.style.marginRight=-this.itemWidth/2+"px";

if(this.items.length>2){
this.setUp();
}else{
this.oList.style.left=(this.wrapWidth-this.itemWidth*this.items.length)/2+"px";
this.prevBtn.style.display="none";
this.nextBtn.style.display="none";
}

this.oList.style.width=this.itemWidth*this.items.length+"px";

},
setUp:function(){
varfirst1=this.items[0].cloneNode();
first1.innerHTML=this.items[0].innerHTML;

first2=this.items[1].cloneNode();
first2.innerHTML=this.items[1].innerHTML;

last1=this.items[this.items.length-1].cloneNode();
last1.innerHTML=this.items[this.items.length-1].innerHTML;

last2=this.items[this.items.length-2].cloneNode();
last2.innerHTML=this.items[this.items.length-2].innerHTML;

this.oList.appendChild(first1);
this.oList.appendChild(first2);
this.oList.insertBefore(last1,this.items[0]);
this.oList.insertBefore(last2,this.items[0]);

this.buildPage();
this.bindEvent();
this.slientGoTo();
},
buildPage:function(){
for(vari=0,len=this.items.length-4;i<len;i++){
varcircle=document.createElement("span");
circle.innerHTML=i+1;
this.page.appendChild(circle);
}
this.pageCircles=this.page.getElementsByTagName("span");
this.addEvent(this.page,"click","gotoIndex");
this.page.style.display="block";
},
bindEvent:function(){
this.addEvent(this.prevBtn,"click","prev");
this.addEvent(this.nextBtn,"click","next");
},
addEvent:function(ele,type,fn,context){
context=context||this;
varinnerFun=function(event){
varevt=event||window.event;
if(typeoffn==="string"){
context[fn].call(context,this,evt);
}else{
fn.call(context,this,evt);
}
}
if(window.addEventListener){
ele.addEventListener(type,innerFun,false);
}else{
ele.attachEvent("on"+type,innerFun);
}
},
index:function(ele){
varparentNode=ele.parentNode;
vareles=parentNode.getElementsByTagName(ele.tagName);

for(vari=0,len=eles.length;i<len;i++){
if(eles[i]==ele){
returni;
}
}
},
hasClass:function(obj,cls){
return!!obj.className&&obj.className.match(newRegExp("(\\s|^)"+cls+"(\\s|$)"));
},
addClass:function(obj,cls){
if(!this.hasClass(obj,cls))obj.className+=""+cls;
},
removeClass:function(obj,cls){
if(this.hasClass(obj,cls)){
varreg=newRegExp("(\\s|^)"+cls+"(\\s|$)");
obj.className=obj.className.replace(reg,"");
}
},
gotoIndex:function(eleContext,evt){
varele=evt.target||evt.srcElement;
varindex=this.index(ele);
if(this.current===this.items.length-4&&index===0){
this.current=0;
this.slientGoTo();
}elseif(this.current===1&&index===this.items.length-5){
this.current=this.items.length-3;
this.slientGoTo();
}
this.current=index+1;
this.doAnimate();
},
prev:function(eleContext,evt){
this.current--;
this.doAnimate();
},
next:function(eleContext,evt){
this.current++;
this.doAnimate();
},
doAnimate:function(){
this.distance=(this.wrapWidth-this.itemWidth*(2*this.current+3))/2-parseInt(this.oList.style.left,10);
if(this.distance<0){
this.speed=-Math.abs(this.speed);
}else{
this.speed=Math.abs(this.speed);
}
this.distance=Math.abs(this.distance);
this.animate();
},
animate:function(){
varthat=this;
this.timer=setTimeout(function(){
varleft=parseInt(that.oList.style.left,10)||0;

if(that.going+Math.abs(that.speed)>=that.distance){
if(that.speed>0){
that.oList.style.left=left+that.distance-that.going+"px";
}else{
that.oList.style.left=left-that.distance+that.going+"px";
}
clearTimeout(that.timer);
that.going=0;
that.onceEnd();
}else{
that.going+=Math.abs(that.speed);
that.oList.style.left=left+that.speed+"px";
that.animate();
}
},25);

},
slientGoTo:function(){
console.log(this.current);
this.oList.style.left=(this.wrapWidth-this.itemWidth*(2*this.current+3))/2+"px";
},
setCircleSelect:function(){
for(vari=0,len=this.pageCircles.length;i<len;i++){
varele=this.pageCircles[i];
if(this.hasClass(ele,"select")){
this.removeClass(ele,"select");
}
}
this.addClass(this.pageCircles[this.current-1],"select");
},
correctCurrent:function(){
if(this.current===0){
this.current=this.items.length-4;
}elseif(this.current===this.items.length-3){
this.current=1;
}else{
returnfalse;
}
this.slientGoTo();
},
onceEnd:function(){
this.correctCurrent();
this.setCircleSelect();
}
}
varcon=document.getElementById("container");
vars=newSlider(con);
</script>
</body>
</html>

相关文章