原声JS面向对象实现的简单轮播

为什么80%的码农都做不了架构师？>>>

给自己定下了一周上传一篇总结博客的计划，实行起来却是坎坷的。这一周还有不到两个小时就过去了，只得拿之前的一则轮播凑个数。代码中的参数尚不提取完善，来日跟新版本再进行封装。（ps:本段代码是不利用array和appendchild的，仅操作left属性实现的简单轮播）。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>没有切换数组的简单轮播</title><style>ul,li{padding:0;margin:0;}li{list-style: none;}.LBstage{width:200px;height:150px;margin:0 auto;margin-top:300px;border:1px solid #aaa;overflow:hidden;position: relative;}.LBcontent{width:800px;height:150px;overflow: hidden;position: absolute;top:0;left:0;}.LBcontent>li{float:left;}.LBdump{margin:0 auto;margin-top:15px;width:140px;height:30px;overflow: hidden;}.LBdump>li{width:30px;height:30px;text-align: center;line-height:30px;margin-right:5px;border-radius:30px;background: #aaa;float:left;cursor:default;}.LBdump>li.chose{background: #ff0000;color:#fff;}</style>
</head>
<body>
<div class="LBstage"><ul class="LBcontent" style="left:0;"><li><img src="img/1.jpg" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/3.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li></ul>
</div>
<ul class="LBdump"><li class="chose">1</li><li>2</li><li>3</li><li>4</li>
</ul>
<button onclick="promo.stop()">暂停</button>
<button onclick="promo.goon()">继续</button>
<script>var promo={/*定义参数*/WIDTH:200,  //图片的宽度length:4,  //图片最大幅数step:100, //每两幅图切换的步数ul:document.getElementsByClassName('LBcontent')[0],  //页面uldump:document.getElementsByClassName('LBdump')[0],   //下标的ul/*功能参数*/timer:null,  //定时器index:0,  //当前图片indexinit:function(){this.timer=setInterval(this.changeView.bind(this),3000);this.listener(this);  //传入promo对象,在lintener中的监听函数中使用},listener:function(t){   //绑定li上的监听事件for(var k in this.dump.childNodes){if(this.dump.childNodes[k].nodeName=='LI'){this.dump.childNodes[k].addEventListener('mouseover',function(){t.stop();  //先清除定时器，手动移动完成后再goont.index=parseInt(this.innerHTML)-1; //将当前手动改变的index赋值给全局t.onestep(t.index); //调用promo的onestep方法t.goon();});}}},changeView:function(){if(this.index==this.length-1){this.index=0;}else{this.index++;}this.onestep(this.index);},onestep:function(cur){//下标颜色变换this.dump.childNodes.forEach(function(i){if(i.nodeName=='LI'){if(i.innerHTML==cur+1){i.className='chose';}else{i.className='';}}});//图片变换var nowLeft=parseFloat(this.ul.style.left); //读取现在的leftvar toLeft=-cur*this.WIDTH;  //读取目标leftvar chaPX=(toLeft-nowLeft)/this.step;   //一次移动的步长var step=1;var stepTimer=setInterval(function(){if(step<=this.step){this.ul.style.left=nowLeft+chaPX*step+'px';step++;}else{clearInterval(stepTimer);stepTimer=null;}}.bind(this),2);},stop:function(){clearInterval(this.timer);this.timer=null;},goon:function(){  //停止之后才能点击继续this.timer===null&&(this.timer=setInterval(this.changeView.bind(this),2500));}};promo.init();//网页缩小或切换等操作时停止动画；window.onblur = function(){promo.stop();};window.onfocus = function(){promo.goon();};
</script>
</body>
</html>

转载于:https://my.oschina.net/bghead/blog/846715

原声JS面向对象实现的简单轮播相关推荐

## 原声js制作简单灯光开关
标签代码:html部分: 开灯关灯 Css样式: #left,#right{ border-radius: 50%; color: red; line-height: 30px; width: 40 ...
这是用原声js编写的地址选择器,使用select编写的三联选择器
这是用原声js编写的地址选择器,使用select编写的三联选择器 <!DOCTYPE html> <html lang="en"> <head> ...
（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/
(常用代码)原声JS 实现倒计时的效果.分/秒/毫秒/ 第一步:构建HTML 结构和样式  <div class="timing" ...
html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
java实现选项卡定时轮播_原生js面向对象编程-选项卡(自动轮播)
原生js面向对象编程-选项卡(自动轮播) }#div1 input{color:#fff;width:100px;height:40px;background:darkseagreen;border: ...
html图片自动切换的幻灯片效果的,js带点自动图片轮播幻灯片特效代码分享
本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:--- ...
html轮播带缩略图,js带缩略图的图片轮播效果代码分享
本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:--------------- ...
html图片自动循环轮播图,js实现图片无缝循环轮播
本文实例为大家分享了js实现图片无缝循环轮播的具体代码,供大家参考,具体内容如下代码如下 Document #container{ overflow:hidden; width:400px; hei ...
html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...

原声JS面向对象实现的简单轮播

原声JS面向对象实现的简单轮播相关推荐

最新文章

热门文章