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"> ...
随机推荐
- Java之集合(十九)LinkedBlockingDeque
转载请注明源出处:http://www.cnblogs.com/lighten/p/7494577.html 1.前言 本章介绍LinkedBlockingDeque,这是一个可选容量的有界双向链表队 ...
- Spring Boot 日志配置
Spring Boot 日志配置 默认日志 Logback: 默认情况下,Spring Boot会用Logback来记录日志,并用INFO级别输出到控制台.在运行应用程序和其他例子时,你应该已经看到很 ...
- heroku 部署ruby项目后 未连接数据库显示（We're sorry, but something went wrong. If you are the application owner ）
如何部署请参照: http://blog.csdn.net/xz360717118/article/details/62422741 部署后如果发现显示:We're sorry, but someth ...
- thread 带参数
在 .NET Framework 2.0 版中,要实现线程调用带参数的方法有两种办法. 第一种:使用ParameterizedThreadStart. 调用 System.Threading.Thre ...
- js便签笔记（4）——简单说说getAttributeNode()和setAttributeNode()
1.前言: 前两天写过一片<分析dom元素的特性Attribute和属性Property>,分析了特性和属性的区别.那篇文章却忽略了一个主要知识点——getAttributeNode()和 ...
- numpy.linalg.norm(求范数)
1.linalg=linear(线性)+algebra(代数),norm则表示范数. 2.函数参数 x_norm=np.linalg.norm(x, ord=None, axis=None, keep ...
- springboot-13-junitTest
junitTest, 提喜欢用的一个方法, 在测试代码时非常好用 1, 添加maven依赖 <!-- 加入spring-test依赖 --> <dependency> < ...
- WPF中定义TabItem的可选区域(特别是当使用Label来呈现Header时)
1. 如上图,所示,此时当鼠标移入蓝色框内除文字部分,整个TabItem是没反应的 经过查看代码可以看到: 将图标中的VerticalAlignment="Center"和Hori ...
- kafka-2.11-0.11集群搭建
kafka集群依赖于zookeeper,所以需要先搭建zookeeper集群,kafka默认自带了内建的zookeeper,建议使用自己外搭建的zookeeper,这样比较灵活并且解耦服务,同时也可以 ...
- no awt in java.libary.path
缺少依赖包. linux下进入jdk安装路径/jre/lib/i386 使用ldd查看依赖包情况: ldd libawt.so 如果发现有not found的,就安装上,或者从jdk下查找,使用软连接 ...