轮播图案例

由透明度实现轮播图案例

1、HTML结构，左右箭头和数字下标部分通过js添加，可以实现灵活的组件轮播图需要的部分。

<div id="sliderBox">
			<ul id="imgLists">
				<li><img src="img/1.jpg" ></li>
				<li><img src="img/2.jpg" ></li>
				<li><img src="img/3.jpg" ></li>
				<li><img src="img/4.jpg" ></li>
				<li><img src="img/5.jpg" ></li>
				<li><img src="img/6.jpg" ></li>
			</ul>
			<div id="btns">
			</div>
			<ul id="nums">
			</ul>
		</div>

2、CSS样式

<style type="text/css">
	html,body,ul,li{margin: 0;padding: 0;}
	ul,li{list-style: none;}
	html,body{height: 100%;}
	#sliderBox{position: relative;width: 900px;height: 300px;}
			
	#imgLists{width: 900px;height: 300px;}
	#imgLists li{float: left;position: absolute;top: 0;left: 0;}
	#imgLists li img{width: 900px;height: 300px;}
			
	/* 左右箭头 */
	#btns span{position: absolute;
		width: 50px;height: 50px;text-align: center;line-height: 50px;
		top: 50%;margin-top: -25px;
	/* 水平方向居中 */
		user-select: none;
		font-size: 50px;background: #000;opacity: .5;color: #fff;cursor: pointer;
	}
	#btns span:nth-child(1){
		left: 10px;
	}
	#btns span:nth-child(2){
		right: 10px;
	}
			
	/* 下标 */
	#nums{position: absolute;bottom: 10px;right: 50px;}
	#nums li{float: left;background: #fff;color: red;
		width: 20px;height: 20px;line-height: 20px;text-align: center;
		margin: 0 10px;border-radius: 50%;}
	#nums li:hover,#nums .hover{background: red;color: #fff;}
</style>

3、JS引入调用

<script src="startMove.js" type="text/javascript" charset="utf-8"></script>
<script src="opacity.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var opacity = new Opacity();
	opacity.autoPlay();
	opacity.btns();
	opacity.nums();
</script>

4、JS代码

function Opacity(){
	this.sliderBox = document.getElementById("sliderBox");
	
	this.oImgLists = document.getElementById("imgLists");
	this.oLis = this.oImgLists.children;
	this.i=0;
	
	// 得到左右箭头
	this.btnArea = document.getElementById("btns");
	this.jiantou = this.btnArea.children;
	
	// 得到右下角坐标
	this.aNums = document.getElementById("nums");
	this.aIndexs = this.aNums.children;
	
	// 调用初始化函数
	this.init();
	
	this.sliderBox.onmouseover = ()=>{
		clearInterval(this.timer);
	}
	this.sliderBox.onmouseout = ()=>{
		this.timer = setInterval(()=>{
			this.move();
		},3000);
	}
}
Opacity.prototype.init = function(){
	// 普通函数,谁调用指向谁
	
	// 设置当前第一个图片的opacity为1
	this.oLis[this.i].style.opacity = 1;
	// 其余为0
	for(var j=1; j<this.oLis.length ; j++){
		this.oLis[j].style.opacity = 0;
	}
	this.i++;
	this.move = function(){
		// this.i值大于临界值
		if(this.i>=this.oLis.length){
			this.i=0;
		}
		// this.i值小于临界值
		if(this.i<0){
			this.i=this.oLis.length-1;
		}
		for(var j=0 ; j<this.oLis.length ; j++){
			startMove(this.oLis[j],{"opacity":0});
		}
		startMove(this.oLis[this.i],{"opacity":100});
		// move函数中,下标也要跟随着变化
		// 先都清空,再给当前索引加hover
		for(var j=0 ; j<this.aIndexs.length ; j++){
			this.aIndexs[j].className = "";
		}
		this.aIndexs[this.i].className = "hover";
		
		this.i++;
	}
}
Opacity.prototype.autoPlay = function(){
	this.timer = setInterval(()=>{
		this.move();
	},3000);
	
}
// btns 左右箭头
Opacity.prototype.btns = function(){
	this.btnArea.innerHTML = `<span>&lt;</span>
				<span>&gt;</span>`;
	this.jiantou[0].onclick = () => {
		// 想让图片向左移动,其实就是控制移动的下一步的i值
		this.i = this.i - 2;
		this.move();
	}
	this.jiantou[1].onclick = () => {
		this.move();
	}
}
// nums 数字下标
Opacity.prototype.nums = function(){
	this.aNums.innerHTML = `<li class="hover">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>`;
	for(let j=0 ; j<this.aIndexs.length ; j++){
		// 给每个下标都添加鼠标移入事件
		this.aIndexs[j].onmouseover = ()=>{
			// 鼠标移入时，i值索引定位到当前的位置，再执行move()
			this.i=j;
			this.move();
		}
	}
}

由左右切换实现轮播图

1、HTML结构
  在原来三张图片最后在放一张第一张的图片，用于无缝切换。
2、CSS结构
与上面一致
3、JS引入调用

<script src="slider.js" type="text/javascript" charset="utf-8"></script>
<script src="startMove.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var slider = new Slider();
	slider.btns();
	slider.nums();
</script>

4、JS代码

function $(id) {
	return document.getElementById(id);
}

function Slider() {
	// 轮播图框
	this.aSliderBox = $("sliderBox");

	// 存放轮播图的ul
	this.aImgLists = $("imgLists");
	this.alis = this.aImgLists.children;

	this.width = this.alis[0].offsetWidth;

	// 得到左右箭头span
	this.aBtns = $("btns");
	this.aSpans = this.aBtns.children;
	// 得到右下角坐标
	this.aNums = document.getElementById("nums");
	this.aIndexs = this.aNums.children;

	// 初始时i为0
	this.i = 0;

	// 给ul设置宽高,根据li的宽高和个数进行设置
	this.aImgLists.style.width = this.width * this.alis.length + "px";
	this.aImgLists.style.height = this.alis[0].offsetHeight + "px";

	// 普通函数 谁调用this指向谁
	this.move = () => {
		this.i++;
		// 如果i超出右边的范围 alis.length*width = ul的宽度.则出现空白
		if (this.i >= this.alis.length) {
			this.aImgLists.style.left = "0px"; // ul直接跳转到第一张
			this.i = 1; // i为1,向左移动1个li的宽度,即由第一张图向第二张图过渡
		}
		//如果i超出左边的范围 i为-1时,出现空白
		if (this.i <= -1) {
			// 直接显示最后一张图,并且要此向倒数第二张图移
			this.aImgLists.style.left = -this.width * (this.alis.length - 1) + "px";
			this.i = this.alis.length - 2;
		}

		// move函数中,下标也要跟随着变化
		// 先都清空,再给当前索引加hover
		for (var j = 0; j < this.aIndexs.length; j++) {
			this.aIndexs[j].className = "";
		}
		if (this.i >= this.aIndexs.length) {
			this.aIndexs[0].className = "hover";
		} else {
			this.aIndexs[this.i].className = "hover";
		}

		startMove(this.aImgLists, {
			"left": -this.alis[0].offsetWidth * this.i
		});
	}
	this.autoPlay();

	this.aSliderBox.onmouseover = () => {
		clearInterval(this.timer);
	}

	this.aSliderBox.onmouseout = () => {
		this.timer = setInterval(() => {
			this.move();
		}, 3000);
	}

}

// 自动播放 普通函数，谁调用this指向谁
Slider.prototype.autoPlay = function() {
	this.timer = setInterval(() => {
		// 定时器,执行move函数
		this.move();
	}, 3000);


}
// 左右箭头
Slider.prototype.btns = function() {
	this.aSpans[0].onclick = () => {
		// 想让图片向左移动,其实就是控制移动的下一步的i值
		this.i = this.i - 2;
		this.move();
	}
	this.aSpans[1].onclick = () => {
		this.move();
	}
}

Slider.prototype.nums = function() {

	for (let j = 0; j < this.aIndexs.length; j++) {
		// 给每个下标都添加鼠标移入事件
		this.aIndexs[j].onmouseover = () => {
			// 要向下标为j的图片移动,则i为j-1
			// 才能实现由j的左边向j移动的效果
			this.i = j - 1;
			this.move();
		}
	}

}