Javascript专题（三）c.各种轮播--上下滚动轮播(面向对象版本)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div,ul,li{margin: 0;padding: 0;list-style: none;}
body{
background: #000;
}
#box{
margin: 10px auto;
width: 492px;
height: 172px;
border: 8px solid #fff;
border-radius: 5px;
position: relative;
}
#box .list{
width: 490px;
height: 170px;
border: 1px solid blue;
overflow: hidden;
position: relative;
}
#box .list ul{
position: absolute;
top: 0;
left: 0;
}
#box .list ul li{
width: 490px;
height: 170px;
overflow: hidden;
}
#box .list-count{
position: absolute;
right: 0;
bottom: 5px;
cursor: pointer;
}
#box .list-count li{
color: #fff;
float: left;
margin-right: 5px;
border-radius: 5px;
background: #f60;
width: 20px;
height: 20px;
text-align: center;
font: 12px/20px Arial;
opacity: 0.7;
filter: alpha(opacity=70);
}
#box .list-count li.current{
opacity: 1;
filter: alpha(opacity=100);
}
</style>
</head>
<body>
<div id="box">
<div class="list">
<ul>
<li><img src="../image/landscape_map/055.jpg" width="490" height="170"></li>
<li><img src="../image/landscape_map/037.jpg" width="490" height="170"></li>
<li><img src="../image/landscape_map/039.jpg" width="490" height="170"></li>
<li><img src="../image/landscape_map/032.jpg" width="490" height="170"></li>
<li><img src="../image/landscape_map/038.jpg" width="490" height="170"></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
//获取ID
var $=function(id){return typeof id==="string"?document.getElementById(id):id}
//获取tagName
var $$=function(tagName,oParent){return (oParent||document).getElementsByTagName(tagName)}
//自动轮播对象
var obj_Auto=function(id){this.init(id)};
obj_Auto.prototype={
init:function(id){
var oThis=this;
this.oBox=$(id);
this.oUl=$$("ul",this.oBox)[0];
this.aImg=$$("img",this.oBox);
this.createBtn();
this.aBtn=$$("li",this.oCount);
this.iNow=0;
this.start_timer=null;
this.auto_timer=null;
for(var i=0;i<this.aBtn.length;i++){
this.aBtn[i].index=i;
this.aBtn[i].onmouseover=function(){
oThis.iNow=this.index;
//去除自动播放时的bug
//另外这两句话位置不能错了，否则就是上一次的Show了
oThis.Show();
}
}
this.oBox.onmouseout=function(){
oThis.Auto();
}
this.oBox.onmouseover=function(){
clearInterval(oThis.auto_timer);
}
},
createBtn:function(){
//碎片传递，用于提升效率，将所有新增先添加到碎片中，防止多次渲染导致的流畅°下降问题。
//另外一种方法：可以先扔进数组里,主要多次for循环的创建
this.oCount=document.createElement("ul");
this.oFrag=document.createDocumentFragment();
this.oCount.className="list-count";
for(var i=0;i<this.aImg.length;i++){
var oLi=document.createElement("li");
oLi.innerHTML=i+1;
this.oFrag.appendChild(oLi);
}
this.oCount.appendChild(this.oFrag);
this.oBox.appendChild(this.oCount);
},
Show:function(){
for(var i=0;i<this.aBtn.length;i++)this.aBtn[i].className="";
this.aBtn[this.iNow].className="current";
this.Move(-this.iNow*this.aImg[0].offsetHeight);
},
Move:function(distance){
var oThis=this;
clearInterval(this.start_timer);
this.start_timer=setInterval(function(){
var speed=(distance-oThis.oUl.offsetTop)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//若是不总是向上取整，会永远到不了
oThis.oUl.offsetTop==distance?clearInterval(oThis.start_timer)
:oThis.oUl.style.top=oThis.oUl.offsetTop+speed+"px";
},30)
},
Auto:function(){
var oThis=this;
clearInterval(this.suto_timer);
this.auto_timer= setInterval(function(){
oThis.iNow<oThis.aImg.length-1? oThis.iNow++:(oThis.iNow=0);
oThis.Show();
},2000);
}
}
new obj_Auto("box");//在没有创建之前不可以直接
var x=new obj_Auto("box");
</script>
</html>
Javascript专题（三）c.各种轮播--上下滚动轮播(面向对象版本)的更多相关文章
- Javascript专题（三）b.各种轮播和细节分析--上下滚动轮播
这一次,我们用原生JS实现上下滚动方式的轮播.顺带学习一下用JS来创建HTML元素. 上一次写的轮播是淡入淡出效果的,相对来说其实是比较简单的. github源码: 上下轮播源码-github A. ...
- 天猫京东app中常见的上下滚动轮播效果如何实现？
前段时间,公司安排我制作一个上下滚动轮播效果,类似于我们在天猫京东app中常见的这样: 哇kao!这个我完全不会呀??? 幸好,前几天一个朋友在朋友圈分享了一篇推文.瞬间引领我走出了迷茫,这个教程特别 ...
- js 手动轮播和自动轮播
$(function(){ //默认值 $("#carousel1").css("background-color","#FFF"); // ...
- 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化
之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...
- 原生js手动轮播图
手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...
- javascript效果：手风琴、轮播图、图片滑动
最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
随机推荐
- iOS NET Error Code
see NSURLError.h Define NSURLErrorUnknown = -, NSURLErrorCancelled = -, NSURLErrorBadURL = -, NSURLE ...
- #define与typedef区别
1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,只有在编译已被展开的源程序时才会发现可能的错误并报错.例如: #define PI 3.141 ...
- [转]JS的内存泄露处理
问题: 1.给DOM对象添加的属性是一个对象的引用.范例: var MyObject = {}; document.getElementByIdx_x('myDiv').myProp = MyObje ...
- 卸载DCOS
再次安装,已经是隔了两天,我打算换一台机器作为boot机器,但是发现报错,告知部署设备已经安装了dcos:看来需要卸载:uninstall-master.sh /opt/mesosphere/bin/ ...
- hdu 4372 Count the Buildings —— 思路+第一类斯特林数
题目:http://acm.hdu.edu.cn/showproblem.php?pid=4372 首先,最高的会被看见: 然后考虑剩下 \( x+y-2 \) 个被看见的,每个带了一群被它挡住的楼, ...
- windows7下c++11环境搭建
1.安装codeblocks 13.12 2.下载安装tdm-gcc-4.8.1-3 3.配置coldblocks的编译器(settings->compiler->compiler set ...
- office2016_windows永久激活查看方法
YC7N8-G7WR6-9WR4H-6Y2W4-KBT6X 首先要保证你安装了 百云址:http://pan.baidu.com/share/home?uk=4011207371 如果你是win8,w ...
- GCC提供的几个內建函数
参考 https://gcc.gnu.org/onlinedocs/gcc-4.3.2/gcc/Other-Builtins.html#Other-Builtins https://en.wikipe ...
- Linux如何打开执行脚本
命令行下例如要打开startmysql.sh就直接 sh /目录/目录当前界面下就简单了在这个SH文件目录下打开终端 输入 sh startmysql.sh 回车或者对这个文件右键 打开 选择“在终端 ...
- sql中in和exist语句的区别？(补充了left join和right join)
in和exists(摘录自百度)in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询. 如果两个表中一个较小,一个是大表,则子查询表大的用exi ...