封装轮播图学轮子不如造轮子详解编程语言

CSS 部分代码

<style type="text/css"> 
     ul{ 
       padding:0; 
       margin:0; 
       list-style:none; 
     } 
     img{ 
       vertical-align:top; 
     } 
      .slider{ 
         width:490px; 
         height:170px; 
         margin:100px auto; 
         border:1px solid red; 
         padding:5px; 
         position:relative; 
      } 
      .box{ 
        
       width:100%; 
       height:100%; 
       position:relative; 
       overflow:hidden; 
      } 
      .box ul{ 
         width:900%; 
         height:100%; 
         position:absolute; 
         left:-490px; 
         top:0; 
 
      } 
      .box ul li{ 
        float:left; 
      } 
     
    .slider .circles{ 
      position:absolute; 
      left:50%; 
      margin-left:-70px; 
      bottom:10px; 
 
    } 
    .slider .circles ul li{ 
       width:18px; 
       height:18px; 
       background:#ff6600; 
       text-align:center; 
       line-height:18px; 
       float:left; 
       margin-right:10px; 
       cursor:pointer; 
    } 
    .oldColor{ 
     
      background:#ff6600!important; 
     
    } 
 
    .newColor{ 
       background:#ff0000!important; 
    } 
 
    .slider a{ 
       text-decoration:none; 
       font-size:20px; 
       height:30px; 
       width:30px; 
       position:absolute; 
       top:50%; 
       margin-top:-15px; 
       background:rgba(0,0,0,0.3); 
       line-height:30px; 
       text-align:center; 
       color:#eee; 
 
    } 
    .slider a:hover{ 
       background:rgba(0,0,0,0.7); 
    } 
 
    .slider .next{ 
     right:5px; 
    } 
 
    .slider .prev{ 
     left:5px; 
    }

HTML部分

<body> 
  <div class="slider"> 
        <div class="box"> 
           <ul> 
              <li><img src="images/05.jpg" alt="" /></li> 
              <li><img src="images/01.jpg" alt="" /></li> 
              <li><img src="images/02.jpg" alt="" /></li> 
              <li><img src="images/03.jpg" alt="" /></li> 
              <li><img src="images/04.jpg" alt="" /></li> 
              <li><img src="images/05.jpg" alt="" /></li> 
            <li><img src="images/01.jpg" alt="" /></li> 
           </ul> 
       </div> 
      <div  class="circles"> 
            <ul> 
                <li class="newColor">1</li> 
                <li>2</li> 
                <li>3</li> 
                    <li>4</li> 
                    <li>5</li> 
                </ul> 
        </div> 
         <a href="javascript:;" class="prev">&lt;</a> 
         <a href="javascript:;" class="next">&gt;</a> 
      </div>

JS部分

  <script type="text/javascript"> 
/* 
@1 图片移动时间 
@2 图片大小 
@3 节点对象{} 
*/ 
function slider(imgMoveTime,imgWidth,objDom) 
{ 
function $$(name){ 
return document.querySelectorAll(name); 
} 
function $(name){ 
return document.querySelector(name); 
} 
function getCss(ele,style){ 
return window.getComputedStyle?getComputedStyle(ele)[style]:obj.CurrentStyle(style); 
} 
/* 
Dom节点 
*/ 
var circles=$$(objDom[0]);  
var slider=$(objDom[1]); 
var imgBox=$(objDom[2]); 
var prev=$(objDom[3]); 
var next=$(objDom[4]); 
var sign=true; 
var len=circles.length; 
var circleLen=circles.length; 
/*时间运动函数*/ 
function  offset(distance) 
{ 
var  S=distance; 
var  T=imgMoveTime; 
var  oldT=new Date().getTime(); 
var s=0; 
var t=0; 
var newT=0; 
var  timer=null; 
clearInterval(timer); 
var position=imgBox.offsetLeft; 
timer=setInterval(function(){ 
newT=new Date().getTime(); 
t=newT-oldT; 
s=S*t/T; 
if(t/T>=1){ 
                   
imgBox.style.left=position+S+"px"; 
/* 
实现无线循环 
当满足条件瞬间变到指定位置 
欺骗性 
*/ 
if(imgBox.offsetLeft<=-2940){ 
imgBox.style.left="-490px"; 
} 
else if(imgBox.offsetLeft>=0){ 
imgBox.style.left="-2450px"; 
} 
/* 
标记属性  上一张图片切换好了 才能开始开始下一次切换 
*/ 
sign=true; 
clearInterval(timer); 
} 
else{ 
sign=false; 
imgBox.style.left=position+s+"px"; 
} 
},1000/60); 
 
} 
//左按钮切换 
function moveL(){ 
if(sign){ 
offset(imgWidth); 
} 
var index=Math.abs(imgBox.offsetLeft/i); 
                    console.log(index); 
if(index<=1){ 
circleMove(circleLen);//这里是小圆点的最大下标 
                     } 
else{ 
circleMove(index-2); 
} 
} 
//右按钮切换 
function moveR(){ 
if(sign){ 
offset(imgWidth*-1); 
} 
var index=Math.abs(imgBox.offsetLeft/imgWidth); 
                    console.log(imgBox.offsetLeft); 
console.log(index); 
if(index<=circleLen-1){ 
circleMove(index); 
} 
else{ 
circleMove(0); 
} 
} 
/* 
左按钮  和  右按钮 点击切换图片 
*/ 
prev.onclick=moveL; 
next.onclick=moveR; 
//点击左右切换按钮 小圆点变化 
function circleMove(index) 
{ 
for(var i=0;i<len;i++){ 
circles[i].className="oldColor"; 
} 
circles[index].className="newColor"; 
}

      //鼠标移动小圆点上颜色变化

function circleColorChange() 
{ for(var i=0;i<len;i++) { 
circles[i].index=i; circles[i].onmouseover=function()
{ for(var j=0;j<len;j++){ circles[j].className="oldColor"; }
 this.className="newColor" imgBox.style.left=(this.index+1)*imgWidth*-1+"px";
 } } } 
circleColorChange();
      //当用户不操作时,也会自动切换图片 
animation=setInterval(function(){ 
moveR(); 
},2000);
       //鼠标移动在上面的时候清除自动播放 
slider.onmouseover=function(){ 
clearInterval(animation); 
} 
//鼠标移开的时候自动播放开始 
slider.onmouseout=function(){ 
animation=setInterval(function(){ 
moveR(); 
},2000); 
} 
}
                //调用 
slider(500,490,    { 
0:".circles ul li", 
1:".slider", 
2:".box ul", 
3:".prev", 
4:".next" 
}); 
</script>

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/12283.html

封装轮播图 学轮子不如造轮子详解编程语言

相关推荐

发表回复

封装轮播图学轮子不如造轮子详解编程语言