焦点控制切换和轮播

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

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

<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代码：

最后主角要登场了，那就是我们的大佬，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]
}
} //运动库引用到此结束的标记

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

　　　　};//
　　};

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

}

结束~~~拜拜~~~下次见！

焦点控制切换和轮播

猜你喜欢