zoukankan      html  css  js  c++  java
  • 封装轮播图 学轮子不如造轮子

    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部分

    
    

    /*
    @1 图片移动时间
    @2 图片大小
    @3 节点对象{
    属性名不能改! 属性值可以改!
    "circles":".circles ul li", //所有小圆点
    "slider":".slider", //轮播图盒子
    "imgBox":".box ul", //包含所有图片的盒子
    "prev":".prev", //左切换按钮
    "next":".next" //右切换按钮
    }
    */

    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["circles"]); //所有小圆点
    var slider=$(objDom["slider"]); //轮播图盒子
    var imgBox=$(objDom["imgBox"]); //包含所有图片的盒子
    var prev=$(objDom["prev"]); //左切换按钮
    var next=$(objDom["next"]); //右切换按钮
    var sign=true; //一张切换好了才能再切换 sign作为标记是否切换完毕
    var len=circles.length;
    var circleLen=circles.length;
    var boundLeft=imgWidth*-1*(circleLen+1);//轮播图满足左边界的值在移动后瞬间变到指定位置

    
    

    /*时间运动函数*/
    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<=boundLeft){
    imgBox.style.left=imgWidth*-1+"px";
    }
    else if(imgBox.offsetLeft>=0){
    imgBox.style.left=imgWidth*-1*circleLen+"px";
    }
    /*
    标记属性 上一张图片切换好了 才能开始开始下一次切换
    */
    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);
    if(index<=1){

    circleMove(circleLen);//这里是小圆点的最大下标
    }
    else{
    circleMove(index-2);
    }
    }

    
    

    function moveR(){
    if(sign){
    offset(imgWidth*-1);
    }
    var index=Math.abs(imgBox.offsetLeft/imgWidth);

    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);

    
    

    }
    }



    有的地方还是没有尽善尽美 在兼容方面 还需要完善

     没有报错  也没有BUG OJBK

    
    
  • 相关阅读:
    css 画图形大全
    css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别
    css3 常用动画 随笔
    OpenCV局部变形算法探究
    利用moment为基础,基于DOM实现一个多个倒计时同时进行的js库方便使用
    nodejs 中使用 mocha + should + jscoverage 生成 单元测试覆盖率报告
    AutoX安途杯中山大学程序设计校赛 G Stack Sort I
    理解原生JAVA AOP思想
    分享几个MFC下建立隐藏运行的程序的方法(不会出现黑色框)。
    发一个自己封装的PNG透明图片类。
  • 原文地址:https://www.cnblogs.com/liveoutfun/p/9268333.html
Copyright © 2011-2022 走看看