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"> ...
随机推荐
- 剑指offer四十一之和为S的连续正数序列
一.题目 题目描述:小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数 ...
- Storm实现单词统计代码
import java.io.File; import java.io.IOException; import java.util.Collection; import java.util.HashM ...
- python代码位置引发的错误
觉得python对代码位置的要求简直是变态,缩进引发的错误我以前在博客里讲过了,如果不懂可以看看我以前的博客,今天又遇到了一个代码位置所引发的错误,现在给大家分享一下: 我想要打印出来一个5*5的实心 ...
- CS231n学习笔记-图像分类笔记（下篇）
原文地址:智能单元 K-Nearest Neighbor分类器 大家可能注意到了,为什么只用最相似的一张图片的标签来作为测试图像的标签呢?这不是很奇怪吗!是的,使用K-Nearest Neighbor ...
- fail2ban的使用以及防暴力破解与邮件预警
fail2ban可以监视你的系统日志,然后匹配日志的错误信息(正则式匹配)执行相应的屏蔽动作(一般情况下是防火墙),而且可以发送e-mail通知系统管理员! fail2ban运行机制:简单来说其功能就 ...
- PHP在使用正则表达式验证，防注入的时候要注意一下的细节
如下:这是一个防止用户输入的数据中包含SQL的一些关键字的正则表达式 之前一直认为这写的很正确,没多大的问题,而且自己测试也没问题, 因为关键字包含 And,而如果用户输入andy的时候呢,汗,所以还 ...
- java的if语句，少于一行可以省略大括号
我们认识的 if 语句,大概是这样的: if(条件){ 语句1; }else{ 语句2; } 如果要执行的语句少于1行,大括号是可以省略的 可以让程序更简洁和美观 if(条件){ 语句1; 语句2; ...
- 01 JDBC的问题
jdbc编程步骤: 1. 加载.注册数据库驱动 DriverManager 2. 创建并获取数据库链接 Connection 3. 创建jdbc statement/preparedState ...
- json-lib使用——JSONObject与JSONArray
ps:看这篇博客之前首先要引入工具包json-lib-2.2.2-jdk15.jar 资源链接:百度云:链接:https://pan.baidu.com/s/1o9k7PSu 密码:00lj 一.从O ...
- Polymorphic form--多态表单
一个ruby on rails项目,用户和公司的模型都有地址. 我要创建一个地址表,包含用户和公司表的引用,比直接做下去要好一点,这回让我的数据库设计保持干净. 我的第一印象是,这似乎很难实现,外面所 ...