焦点控制切换和轮播

Posted 2020-11-06 shimeng123

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

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

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

}

 

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