焦点控制切换和轮播

Posted shimeng123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了焦点控制切换和轮播相关的知识,希望对你有一定的参考价值。

切换和轮播是前端遇到过最多的效果和写过最多的效果。网上也有很多类似插件。但是我在这里还是要记录一下自己写的轮播图效果,与大多数轮播不同,这次要分享的是一个垂直的轮播图切换效果。请我的唯一一个粉丝来赏析,哈哈哈。。。。

首先是页面布局代码丢在这里 

<div id="box">
  <ul>
    <li><img src="../img/1_1.jpg"/></li>   //这里的图片文件小伙伴需要换成自己的哈哈
    <li><img src="../img/1_2.jpg"/></li>   //这里的图片文件小伙伴需要换成自己的哈哈
    <li><img src="../img/1_4.jpg"/></li>   //这里的图片文件小伙伴需要换成自己的哈哈
  </ul>
  <ol>
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
  </ol>
</div>

然后是css代码:

<style>
*{margin:0;padding:0;}
body{line-height:24px;font-family: "微软雅黑";}
ul,ol,li{list-style:none;}
#box{width:178px;margin:200px auto 0;position:relative;height:108px;overflow:hidden;}
#box ul{height:108px;position:absolute;}
#box ul li{height:108px;}
#box ol{position:absolute;bottom:10px;right:10px;}
#box ol li{display:inline-block;width:14px;height:14px;border-radius:7px;background:#007AFF;font-size:12px;line-height:14px;text-align: center;color:#fff;cursor:pointer;}
#box ol li.active{background:#FFF;color:#007AFF;}
</style>

 

最后主角要登场了,那就是我们的大佬 ,JS!!!此效果是纯原生js完成,不掺杂任何五谷杂粮。

首先,在原生的世界里,我们要用上运动框架(也就是自己封装好的一个运动框架库,一库在手,原生写效果再也不愁了。),其实用jquery的话写起轮播来几乎不浪费力气,我也不知道我为何非要去用原生,大概是闲的。

//运动框架 startMove(obj,{属性名:属性值},回调fn)
function startMove(obj, json, fnEnd) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
  var attr = ‘‘;
  var iTotal = 0;
  var iArrived = 0;
  for (attr in json) {
    iTotal++;
    var iCur = 0;
    if (attr == ‘opacity‘) {
      iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100)
    } else {
    iCur = parseInt(getStyle(obj, attr))
  };
  var iSpeed = (json[attr] - iCur) / 8;
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  if (iCur == json[attr]) {
  iArrived++
  } else {
  if (attr == ‘opacity‘) {
  obj.style.filter = ‘alpha(opacity:‘ + (iCur + iSpeed) + ‘)‘;
  obj.style.opacity = (iCur + iSpeed) / 100
  } else {
  obj.style[attr] = iCur + iSpeed + ‘px‘
  }
  }
};
  if (iArrived == iTotal) {
  clearInterval(obj.timer);
  if (fnEnd) {
  fnEnd()
  }
 }
},
  30)
};

//IE与非IE浏览器获取对象的非行内样式
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr]
} else {
return getComputedStyle(obj, false)[attr]
}
}   //运动库引用到此结束的标记

 

哈哈,下边就可以认真的写一下我们的轮播啦 哈哈

window.onload=function(){
  var oUl=document.getElementsByTagName("ul")[0];
  var oUlLi=oUl.getElementsByTagName("li");
  var oneHeight= oUlLi[0].offsetHeight;

  var oOl=document.getElementsByTagName("ol")[0];
  var oOlLi=oOl.getElementsByTagName("li");
  var iNow=0;

  var timer=null;

  for(var i=0;i<oOlLi.length;i++){
    oOlLi[i].index=i;//索引
    oOlLi[i].onmouseover=function(){
    for(var i=0;i<oOlLi.length;i++){
      oOlLi[i].className=‘‘;

      }
      this.className=‘active‘;
      iNow=this.index;
    startMove(oUl, {top: -this.index*oneHeight});
    clearInterval(timer);
    };//

   oOlLi[i].onmouseout=function(){
      timer=setInterval(toRun,2000);

    };//
  };

  timer=setInterval(toRun,2000);

  function toRun(){
    if(iNow==oOlLi.length-1){
      iNow=0;
    }
    else{
      iNow++;
    }
  for(var i=0;i<oOlLi.length;i++){
    oOlLi[i].className=‘‘;
  }
  oOlLi[iNow].className=‘active‘;
  startMove(oUl, {top: -iNow*oneHeight});
  }

}

 

结束~~~拜拜~~~下次见!

 

以上是关于焦点控制切换和轮播的主要内容,如果未能解决你的问题,请参考以下文章

封装一个简单的原生js焦点轮播图插件

制作焦点图中的思考

Flexslider图片轮播文字图片相结合滑动切换效果

Eclipse 在运行时将焦点切换到控制台

轮播焦点图

为啥切换到 DojoX 网格会导致 JavaScript“无法将焦点移至控制”错误?