文档章节

纯js 轮播的封装

静水流深01
 静水流深01
发布于 2017/04/26 19:00
字数 567
阅读 58
收藏 1
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,
			ul,
			li {
				padding: 0;
				margin: 0;
			}
			
			.carouselBox {
				width: 512px;
				height: 384px;
				border: 3px solid black;
				margin: 0 auto;
				position: relative;
			}
			
			.carouselBox ul {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 10px;
				z-index: 2;
				overflow: hidden;
			}
			
			.carouselBox ul li {
				list-style: none;
				cursor: pointer;
				-moz-user-select: none;
				user-select: none;
				width: 18px;
				height: 18px;
				font-size: 14px;
				line-height: 18px;
				text-align: center;
				background: #ccc;
				float: left;
				margin: 2px;
			}
			
			.carouselBox ul li.selected {
				background: orange;
			}
			
			.carouselBox ul li.normal {
				background: #ccc;
			}
			
			.carouselBox button {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				font-size: 40px;
				font-weight: 200;
				opacity: 0;
			}
			
			.carouselBox button.show {
				opacity: .7;
			}
			
			.carouselBox .btnL {
				left: 10px;
			}
			
			.carouselBox .btnR {
				right: 10px;
			}
		</style>
	</head>

	<body>
		<div class="carouselBox" id="carouselBox">
			<img class="carouselImg" src="images/1.jpg" alt="" />
			<ul>
				<li class="selected">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
			<button class="btnL">&lt;</button>
			<button class="btnR">&gt;</button>
		</div>
		<script type="text/javascript">
			//获取轮播盒字元素节点
			var carouselBox = document.getElementById("carouselBox");

			//调用轮播
			carousel(carouselBox);
			//封装轮播
			function carousel(carouselBox) {

				var carouselBox = carouselBox;
				//获取轮播图片节点
				var carouselImg = carouselBox.getElementsByClassName("carouselImg")[0];
				//获取到所以轮播按钮节点
				var lis = carouselBox.getElementsByTagName("li");
				var len = lis.length;
				//左点击按钮
				var btnL = carouselBox.getElementsByClassName("btnL")[0];
				//右点击按钮
				var btnR = carouselBox.getElementsByClassName("btnR")[0];
				//定义默认图片
				var autoImg = 1;
				//定时器
				var time = null;
				//当前li下标值
				var currIndex = null;
				//调用自动轮播
				autoCarousel();
				//调用点击轮播
				clickCarousel();

				//自动轮播
				function autoCarousel() {
					time = setInterval(autoChange, 1000);
				}
				//自动切换函数
				function autoChange() {
					//如果是最后一张变成第一张
					if(autoImg == 6) {
						autoImg = 1;
					} else {
						autoImg++;
					}
					carouselImg.src = "images/" + autoImg + ".jpg";

					//对应得按钮背景色改变
					bgChange(autoImg - 1);
				}

				//背景色改变函数
				function bgChange(t) {

					for(var i = 0; i < len; i++) {
						if(i === t) {
							//如果是和当前图片对应得下标的li则改变背景 否则变为正常的
							lis[i].className = "selected";
						} else {
							lis[i].className = "normal";
						}
					}
				}

				//点击轮播
				function clickCarousel() {
					for(var i = 0; i < len; i++) {
						lis[i].onclick = function() {
							currIndex = getIndex(this);
							bgChange(currIndex);
							carouselImg.src = "images/" + (currIndex + 1) + ".jpg";
							autoImg = currIndex;
						}
					}
				}

				//获取到点击li的下标
				function getIndex(t) {
					//定义个标签
					var index = -1;
					for(var i = 0; i < len; i++) {
						//找到当前点击对象 并记录下标值
						if(lis[i] === t) {
							index = i;
							break;
						}
					}
					return index;
				}
				//鼠标移入的时候清楚定时器
				carouselBox.onmouseenter = function() {
					clearTimeout(time);
					btnL.className = "show btnL";
					btnR.className = "show btnR";
				}
				//鼠标移出继续轮播
				carouselBox.onmouseleave = function() {
					autoCarousel();
					btnL.className = "btnL";
					btnR.className = "btnR";
				}
				//左点击按钮事件
				btnL.onclick = function() {
					currIndex = autoImg;
					if(autoImg == 1) {
						autoImg = 6;
					} else {
						autoImg--;
					}
					carouselImg.src = "images/" + autoImg + ".jpg";

					//对应得按钮背景色改变
					bgChange(autoImg - 1);
				}
				//右按钮点击事件
				btnR.onclick = function() {
					currIndex = autoImg;
					autoChange();
				}
			}
		</script>
	</body>

</html>

© 著作权归作者所有

共有 人打赏支持
上一篇: 作用域链与闭包
下一篇: 纯js轮播(二)
静水流深01
粉丝 3
博文 15
码字总数 14681
作品 0
信阳
程序员
私信 提问
记一个JavaScript图片轮播思路与代码

说在前头 喜欢并学习前端,一路摸爬滚打过来,现在算算也快满一年的,每天或多或少都会来“拜读”大家的写的文章,学习与感悟了不少,作为一名要变的更强的前端小哥哥,在这个节点上,也想写...

柚子先生
2018/08/06
0
0
封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放。本篇文章的主要目的是分享封装插件的思路。 轮播图的我一开始是写成非插件形式实现的效...

daisy,gogogo
2018/08/18
0
0
手把手教你封装JavaScript插件

我们可能已经用过很多JS插件,比如著名的轮播图插件Swiper.js,滚动条插件iScroll.js等等,用起来非常方便,大大提高了我们的工作效率。那么它们基本实现原理是怎样的呢?我们又该如何DIY一个...

前端王睿
2018/08/29
0
0
手把手教你用原生JavaScript造轮子(2)——轮播图

通过上一篇文章的学习,我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图,希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Let's ...

csdoker
2018/08/12
0
0
python前端jQuery综合应用

传智播客知识点预习 1.幻灯片的制作2.json数据格式及ajax 01- 轮播图-获取相关元素[mw_shl_code=applescript,true]var $slide = $('.slide'), // 轮播区域的div 2- 轮播图-添加小圆点[mw_shl...

czbkzmj
2018/12/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
20分钟前
0
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
26分钟前
0
0
深入理解JVM—JVM内存模型

深入理解JVM—JVM内存模型 我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存...

onedotdot
44分钟前
1
0
MVC、MVCS、MVVM、MVP、VIPER等这么多架构模式哪一个好呢?

在项目开启阶段,其中一个很重要的环节就是选架构。 那么面对目前已知的这么多架构模式我们该怎么选择呢?这确实是个很让人头疼的问题! 下面我就在这里梳理一下目前常见的一些架构模式。 先...

Java干货分享
今天
4
0
简单模仿配置文件的反射机制

//Student类 public class Student { public void love() { System.out.println("python"); } } //Tesy类 public class Tesy { public static void main(String[] args) throws Exceptio......

南桥北木
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部