js原生实现轮播
前两天同事面试新人，让现场写”轮播的实现”。我一想这玩意貌似我也没写过啊，就在旁边暗搓搓地拖了一张纸也在那写，同事都纳闷了！
这玩意实现方法有很多种，就看喜欢那种，喜欢怎么写而已。我这里是通过对img opacity样式修改，达到对img显隐的控制。img轮播到那个位置，就对该位置的img样式进行设置，首先将上一张img样式opacity变为0，然后将新位置img样式opacity设置为1，从而形成轮播。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.main,.scollimg,img{
width: 1500px;
height: 800px;
} .main {
margin: 0 auto;
position: relative;
} .main .scollimg {
position: relative;
} .main .scollimg img {
position: absolute;
top: 0;
left: 0;
} .main .item {
position: absolute;
bottom: 30px;
left: 70px;
width: 200px;
height: 16px;
} .main .item span {
width: 16px;
height: 16px;
background-color: #ffffff;
display: inline-block;
border-radius: 50%;
} .main .item span:hover {
cursor: pointer;
} .arrow {
position: absolute;
top: 280px;
z-index: 2;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
} .arrow:hover {
background-color: rgba(0, 0, 0, 0.7);
} .main:hover .arrow {
display: block;
} #btnleft {
left: 20px;
} #btnright {
right: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="scollimg">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</div>
<div class="btn">
<a href="javascript:;" id="btnleft" class="arrow"><</a>
<a href="javascript:;" id="btnright" class="arrow">></a>
</div>
<div class="item">
<span data-index="0"></span>
<span data-index="1"></span>
<span data-index="2"></span>
<span data-index="3"></span>
<span data-index="4"></span>
</div>
</div>
<script type="text/javascript">
var autoMove = {
imgs: null, //img节点数量(图片数量)
spans: null, //span节点数量(左下角圆圈)
count: 0, //对轮播播放到那张图片进行计数
scollMove: -1, //span节点数量(左下角圆圈)
lastNode: 0, //上一张img和span索引位置
//通过对img opacity修改，达到对img显隐的控制
//index: 轮播索引。img轮播到那个位置，就对该位置的img样式进行设置。首先将上一张img样式opacity变为0，然后将index位置img样式opacity设置为1
styleMovement: function (index) {
var tempLastNode = this.lastNode, tempImgs = this.imgs, tempSpans = this.spans;
tempImgs[tempLastNode].style.opacity = "0";
tempSpans[tempLastNode].style.background = "#ffffff";
tempImgs[index].style.opacity = "1";
tempSpans[index].style.background = "#ff0000";
this.lastNode = index;
},
//轮播按count计数进行切换。初始化时显示第一张图片，然后隐藏第一张图片显现第二张图片，以此类推
//此处count从1开始计数（初始化时count为0），依次执行。当count===imgs.length时，由于图片最后一张的imgs索引是imgs.length-1,故将count重置为0，起到一个轮循作用，依次重新开始。
shiftMovement: function () {
autoMove.styleMovement(this.count++);
if (this.count === this.imgs.length) {
this.count = 0;
}
},
//按钮和点击操作
btnAction: function (type) {
clearInterval(this.scollMove); //按钮操作之前，先清除轮播定时器，避免时间冲突
switch (type) {
case "left": {
if (this.count === 0) {
this.count = (this.imgs.length - 1);
} else {
this.count--;
}
autoMove.styleMovement(this.count);
break;
}
case "right": {
autoMove.shiftMovement();
break;
}
default: {
this.count = type;
autoMove.styleMovement(type);
break
}
}
this.scollMove = setInterval(function () { //鼠标操作完成后，重新执行轮播定时器
autoMove.shiftMovement();
}, 2000);
},
//事件绑定
bindingEvent: function () {
document.getElementById('btnleft').addEventListener("click", function () { //给左按钮绑定事件
autoMove.btnAction("left");
});
document.getElementById('btnright').addEventListener("click", function () { //给右按钮绑定事件
autoMove.btnAction("right");
});
document.querySelector('.item').addEventListener("click", function (event) { //点击某个具体span绑定事件
autoMove.btnAction(parseInt(event.target.getAttribute("data-index")));
});
},
//功能初始化:节点获取，事件绑定，执行定时器
init: function (par1,par2) { //参数和功能初始化
var tempImgs = this.imgs = document.getElementsByTagName(par1);
var tempSpans = this.spans = document.getElementsByTagName(par2);
var length = tempImgs.length;
for (var i = length; i--;) { //将所有img和span的opacity样式都设置为0
tempImgs[i].style.opacity = "0";
tempSpans[i].style.background = "#ffffff";
}
autoMove.bindingEvent();
autoMove.styleMovement(0); //初始化时，显示第一张图片(索引为0的位置)
this.count++; //在执行轮播定时器之前，先将count计数自加 1，则在执行定时器时，图片从第二张(索引为1)开始显示，从而形成连贯显示
this.scollMove = setInterval(function () { //设置轮播定时器，每2秒自动执行一次
autoMove.shiftMovement()
}, 2000)
}
}; //加载完成执行
window.onload = function () {
autoMove.init("img", "span");
};
</script>
</body>
</html>
js原生实现轮播的更多相关文章
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- js原生的轮播，原理以及实践
轮播,无论是文字轮播还是图片轮播,他们的原理是一样的,都是通过定时器执行循环展示和影藏. 一.手动轮播 (1)原理 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利 ...
- js原生的轮播图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
随机推荐
- while 语句
/* while循环 格式:while(循环保持条件){需要执行的语句} OC: int i = 0; int sum = 0; while (i <= 10) { sum = i++; } w ...
- Python基础5：列表 元祖 字典 集合 Json
[ 列表] 列表(list)是Python以及其他语言中最常用到的数据结构之一.Python使用使用中括号 [ ] 来解析列表. 列表是可变的(mutable)——即:可以改变列表的内容. 相关操作: ...
- 多线程编程，CPU是如何解决多线程内存访问问题的
CPU对内存变量的修改是先读取内存数据到CPU Cache中,然后再由CPU做运算,运算完成后继续写入到内存中 在单核CPU中,这完全没有问题,然而在多核CPU中,每一个CPU核心都拥有自己独立的Ca ...
- phpredisadmin 莫名其妙错误，打开了无法显示任何数据
一直用的好好的,某天突然只有页面基本框架,redis数据看不到了. 查日志嘛... PHP Fatal error: Allowed memory size of 134217728 bytes e ...
- SPSS学习系列之SPSS Text Analytics是什么？
不多说,直接上干货! IBM® SPSS® Text Analytics 是一个IBM® SPSS® Modeler 完全集成内插式插件,它采用了先进语言技术和Natural Language Pro ...
- 全网最详细使用Scrapy时遇到0: UserWarning: You do not have a working installation of the service_identity module: 'cannot import name 'opentype''. Please install it from ..的问题解决（图文详解）
不多说,直接上干货! 但是在运行爬虫程序的时候报错了,如下: D:\Code\PycharmProfessionalCode\study\python_spider\30HoursGetWebCraw ...
- 根据屏幕尺寸计算rem
!(function (doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in w ...
- 自然语言处理--Word2vec（二）
前一篇,word2vec(一)主要讲了word2vec一些表层概念,以及主要介绍CBOW方法来求解词向量模型,这里主要讲论文 Distributed Representations of Words ...
- 二叉查找树 Java实现
定义: 一棵二叉查找树是一棵二叉树,每个节点都含有一个Comparable的键(以及对应的值). 每个节点的键都大于左子树中任意节点的键而小于右子树中任意节点的键. 树的术语: Name Functi ...
- [codeup] 1128 出租车费
题目描述 某市出租车计价规则如下:起步4公里10元,即使你的行程没超过4公里:接下来的4公里,每公里2元:之后每公里2.4元.行程的最后一段即使不到1公里,也当作1公里计费. 一个乘客可以根据行程公里 ...