淘先锋技术网

首页 1 2 3 4 5 6 7

原生js 联动轮播 

<div id="playBox">
    <div class="pre" id="pre"></div>
    <div class="next" id="next"></div>
    <div class="smalltitle">
      <ul>
        <li class=""></li>
        <li class="thistitle"></li>
        <li class=""></li>
        <li class=""></li>
        <li class="thistitle"></li>
        <li class=""></li>
       
      </ul>
    </div>
    <ul class="oUlplay" >
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/1.jpg"></a></li>
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/2.jpg"></a></li>
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/3.jpg"></a></li>
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/1.jpg"></a></li>
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/2.jpg"></a></li>
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/3.jpg"></a></li>
    </ul>
     
  </div>
  <div id="dou">
  <ul class="douplay" >
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/1.jpg"></a></li>
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/2.jpg"></a></li>
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/3.jpg"></a></li>
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/1.jpg"></a></li>
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/2.jpg"></a></li>
       <li><a href="http://www.jsdaima.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank"><img src="img/3.jpg"></a></li>
  </ul>
  </div>
<!-- 代码 结束 -->

　　

function getStyle(obj,name)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[name]
    }
    else
    {
        return getComputedStyle(obj,false)[name]
    }
}

function getByClass(oParent,nClass)
{
    var eLe = oParent.getElementsByTagName('*');
    var aRrent  = [];
    for(var i=0; i<eLe.length; i++)
    {
        if(eLe[i].className == nClass)
        {
            aRrent.push(eLe[i]);
        }
    }
    return aRrent;
}

function startMove(obj,att,add)
{
    clearInterval(obj.timer)
    obj.timer = setInterval(function(){
       var cutt = 0 ;
       if(att=='opacity')
       {
           cutt = Math.round(parseFloat(getStyle(obj,att)));//cutt等于返回样式opacity小数值；
       }
       else
       {
           cutt = Math.round(parseInt(getStyle(obj,att)));//cutt等于返回样式opacity整值；
       }
       var speed = (add-cutt)/4;         /*速度*/
       speed = speed>0?Math.ceil(speed):Math.floor(speed);
       if(cutt==add)
       {
           clearInterval(obj.timer)
       }
       else
       {
           if(att=='opacity')
           {
               obj.style.opacity = (cutt+speed)/100;
               obj.style.filter = 'alpha(opacity:'+(cutt+speed)+')';
           }
           else
           {
               obj.style[att] = cutt+speed+'px';
           }
       }
       
    },30)
}

  window.onload = function()
  {
      var oDiv = document.getElementById('playBox');//
      var oPre = document.getElementById('pre'); //上一帧
      var oNext = document.getElementById('next');//下一帧
      var oUlBig = getByClass(oDiv,'oUlplay')[0];//第一个轮播ul
      var aBigLi = oUlBig.getElementsByTagName('li');//第一个轮播li集合
      var oDivSmall = getByClass(oDiv,'smalltitle')[0]; //圆点父元素
      var aLiSmall = oDivSmall.getElementsByTagName('li');//圆点li集合
      
      var oDiv2 = document.getElementById('dou');//第二个轮播box盒子
      var douUl = getByClass(oDiv2,"douplay")[0];//第二个轮播
      var douLi = douUl.getElementsByTagName('li');//第二个轮播li集合
      
      function tab()
      {
         for(var i=0; i<aLiSmall.length; i++)
         {
            aLiSmall[i].className = '';
         }
         aLiSmall[now].className = 'thistitle';//当前圆点添加class
         startMove(oUlBig,'left',-(now*aBigLi[0].offsetWidth));
         startMove(douUl,'left',-(now*douLi[0].offsetWidth))
      }
      var now = 0;
      for(var i=0; i<aLiSmall.length; i++)
      {
          aLiSmall[i].index = i;
          aLiSmall[i].onclick = function()
          {
              now = this.index;
              tab();
          }
     }
      oPre.onclick = function()
      {
          now--
          if(now ==-1)
          {
              now = aBigLi.length;
              now = douLi.length;
          }
           tab();
      }
       oNext.onclick = function()
      {
           now++
          if(now ==aBigLi.length)
          {
              now = 0;
          }
          tab();
      }
      var timer = setInterval(oNext.onclick,3000) //��������ʱ������
      oDiv.onmouseover = function()
      {
          clearInterval(timer)
      }
       oDiv.onmouseout = function()
      {
          timer = setInterval(oNext.onclick,3000) //��������ʱ������
      }
  }
*{ margin:0; padding:0; list-style:none;}
#divSmallBox{overflow:hidden;*display:inline;*zoom:1;width:10px;height:10px;margin:0 5px;border-radius:10px;background:#ffffff;}
#playBox{ width:1000px; height:409px; margin:20px auto; background:#333; position:relative; overflow:hidden;}
#playBox .oUlplay { width:99999px; position:absolute; left:0; top:0;}
#playBox .oUlplay li{ float:left;}
#playBox .pre{ cursor:pointer; width:45px; height:45px; background:#ccc url(l.png) no-repeat; position:absolute; top:190px; left:10px; z-index:10;}
#playBox .next{ cursor:pointer; width:45px; height:45px; background:#ccc url(r.png) no-repeat; position:absolute; top:190px; right:10px; z-index:10;}
#playBox .smalltitle {width:1000px; height:10px; position:absolute; bottom:15px; z-index:10}
#playBox .smalltitle ul{ width:120px; margin:0 auto;}
#playBox .smalltitle ul li{ width:10px; height:10px; margin:0 5px; border-radius:10px; background:#ffffff; float:left; overflow:hidden;*display:inline;*zoom:1; cursor: pointer;}
#playBox .smalltitle .thistitle{ background:#69aaec;}

#dou{ width:1000px; height:409px; margin:20px auto; background:#333; position:relative; overflow:hidden;}
#dou .douplay { width:99999px; position:absolute; left:0; top:0;}
#dou .douplay li{ float:left;}
img{width:1000px;}

　　

转载于:https://www.cnblogs.com/dcwq/p/6007715.html