标签：attr 文件 splay 不同 lin tom 页面 seo oat
切换和轮播是前端遇到过最多的效果和写过最多的效果。网上也有很多类似插件。但是我在这里还是要记录一下自己写的轮播图效果，与大多数轮播不同，这次要分享的是一个垂直的轮播图切换效果。请我的唯一一个粉丝来赏析，哈哈哈。。。。
首先是页面布局代码丢在这里
<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});
}
}
结束~~~拜拜~~~下次见！
标签：attr 文件 splay 不同 lin tom 页面 seo oat
原文地址：https://www.cnblogs.com/shimeng123/p/9055956.html
