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实现H264的解码(从源代码角度)
农历2014年底了,将前段时间工作中研究的FFMPEG解码H264流程在此做一下整理,也算作年终技术总结了! H264解码原理: H264的原理参考另一篇博文 http://blog.csdn.net ...
- 文件系统(node.js学习笔记)
根据nodejs菜鸟教程整理. 官方API文档:nodeJS文件系统API 其他整理:nodejs File System 文件系统操作函数分类 1.引用: 导入文件系统模块(fs)语句:var fs ...
- Python的几种版本的不同实现
Python自身作为一门编程语言,它有多种实现.这里的实现指的是符合Python语言规范的Python解释程序以及标准库等.这些实现虽然实现的是同一种语言,但是彼此之间,特别是与CPython之间还是 ...
- bzoj 2093 [Poi2010]Frog——滑动窗口
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2093 找第k近的可以用一个含k个元素的滑动窗口来实现. 卡空间也还行,但卡时间.不要预处理倍 ...
- ubantu在登录界面一致循环的问题
1.进入非图形化界面:在登录界面同时按下ctrl+alt+f1(有的需要同时按下ctrl+alt+f1+fn) 2.:输入你的账户名回车 *注意;这里是帐户名,而不是密码 3.:输入你的密码回 ...
- uboot启动参数设置分类及方法
一.nfs启动内核与根文件系统,内核与根文件系统都在nfs上 bootargs=noinitrd root=/dev/nfs rw nfsroot=192.168.0.1:/home/tekkaman ...
- WPF Canvas
Canvas为容器控件,用于定位. 1.基本应用 <Border HorizontalAlignment="Left" VerticalAlignment="Top ...
- USB插拔检测程序
一.手动添加ON_WM_DEVICECHANGE()消息 二.添加头文件#include <Dbt.h> 三.定义设备的GUID static const GUID GUID_DEVINT ...
- javaScript之Array方法
Array类型和其他语言一样,是数据的有序列表,但不同的是数组的每一项们可以保存任何类型的数据. 1.检测方法(确定某个对象是不是数组) (1)value instanceof Array (2)Ar ...
- 洛谷-关押罪犯-NOIP2010提高组复赛
题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示 ...