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"> ...
随机推荐
- POJ 1118
#include<iostream> #include<set> #include<stdio.h> #include<math.h> #include ...
- 【bat/cmd】脚本开发
0. 开篇 bat/cmd 均是window操作系统下,两者都是通过文本方式编辑,创建以及查看.均是命令的集合.bat与cmd有什么区别呢 ? 1) cmd文件允许使用的命令比bat多,但是只有在wi ...
- linux 编译安装amqp
背景: 下面的内容是我根据网上博客小松的文章 https://www.phpsong.com/2223.html 做的修改,因为我走到make 编译amqp这步报错 最开始报下面的这个错误,是因为要安 ...
- vmware 实现linux目录映射window本地目录
---恢复内容开始--- 背景: 1,使用lnmp环境 2,代码可以在windows上面写,直接映射到linux的lnmp环境下面 第一步: vmware 新建一个linux虚拟机 一路下一步到完成 ...
- Android之Zxing二维码扫描图片拉伸
还是这个接手项目,二维码扫描集成的是zxing,扫描界面的图像有明显的拉伸变形. 这种问题,根据以往的经验,一般是x,y轴错位引起的,处理好x,y轴的问题,一般可以解决问题. 由于这个问题,之前有很多 ...
- 计算机硬件的五大单元 & CPU的种类 & 计算机的运行流程
不多说,直接上干货! 计算机硬件的五大单元 关于计算机的组成部分,其实你可以观察你的桌面计算机分析一下,依外观来说这家伙主要分为三部分: 输入单元:包括键盘.鼠标.卡片阅读机.扫描仪.手写板.触摸屏幕 ...
- mysql数据库修改字符编码问题
遇到这种情况,现有项目的数据库已经建好,数据表也已经创建完成. 问题来的,数据库不能插入中文,调试时候发现中文数据从发送请求到最后请求处理完成这些步骤,中文还没有发生乱码. 只有在存储到数据库后查询数 ...
- 面试题21：如何判断二叉树是搜索二叉树BST？
Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...
- java面试⑤前端部分
2.4.1 简单说一下HTML,CSS,javaScript在网页开发中的定位? 2.4.2简单介绍一下AJAX 2.4.3 JS和JQuery的关系 2.4.4 JQuery的常用选择器 2.4.5 ...
- Python引用复制，参数传递，弱引用与垃圾回收
引用 先上个示例: >>> val = [1] >>> val[0] = val >>> val [[...]] 上述代码使val中包含自身,而产 ...