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技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
随机推荐
- ffmpeg处理rtmp/文件/rtsp的推流和拉流
ffmpeg处理rtmp/文件/rtsp的推流和拉流 本demo演示了利用ffmpeg从服务器拉流或本地文件读取流,更改流url或文件类型名称发送回服务器或存到本地的作用. 由于本程序只写了3个小 ...
- Undefined exploded archive location(在myeclipse中TOMCAT不能发布程序。)
原因: 在工程转移过程中,导致工程的配置文件出错: 解决方法: 1.在工程目录下的.mymetadata文件中可能webrootdir被改无效了(把下面内容拷到你的 ...
- script加载之defer和async
详情请查看:http://www.heiboard.com/?p=2098
- Operating System-Process(2)进程表&&中断处理
上一篇文章阐述了进程的基本信息,本文主要介绍进程的实现,主要内容: 进程表(Process Table or Process Control Blocks) 中断处理(Interrupt) 一.进程表 ...
- docker 容器内服务自启动
centos6/7 有区别先说6 centos6: 方式一:rc.local + 容器内的启动脚本 1.chkconfig docker on #docker开机自启动2.[root@master y ...
- HDUj2612(两个起点找到最近的目的地)
Find a way Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 【转】 Pro Android学习笔记（五十）：ActionBar（3）：搜索条
目录(?)[-] ActionBar中的搜索条 通过Menu item上定义search view 进行Searchable的配置 在activity中将search view关联searchable ...
- Java常见设计模式之工厂模式
工厂模式在我们日常的应用中应当算是比较广泛的一种设计模式了.今天让我们一起来学习一下,工厂的设计模式. 工厂模式在<Java与模式>中分为三类: 1)简单工厂模式(Simple F ...
- vs2015类中方法前的引用链接不显示的解决方案
在工具→选项,打开如下界面,寻找“文本编辑器→所有语言”中设置显示:<img data-rawheight="761" data-rawwidth="130 ...
- 菜鸟攻城狮3（Holle World）
1.创建一个HolleWorld.java文本文件 2.代码:public class HolleWorld { public static void main(String[] args) { Sy ...