JavaScript左右切换练习

JavaScript左右切换练习

 HTML

  <div id="box2">
    <img src="../img/2.jpg" alt="">
    <button id="prev"> < </button>
    <button id="next"> > </button>
  </div>

CSS

#box2{
    position: relative;
    height: 500px;
}
#box2>img{
    width: 100%;
    height: 100%;
}
#box2>button{
    width: 50px;
    height: 50px;
    font-size: 20px;
    opacity: .5;
    background: none;
    display: none;
    border-radius: 50%;
    box-shadow: #cdcdcd 3px 3px 3px;
}
#box2:hover button{
    display: block;
}
#box2>button:hover{
    background-color: white;
    cursor: pointer;
}
#prev{
    position: absolute;
    left: 0;
    top: 50%;
}
#next{
    position: absolute;
    right: 0;
    top: 50%;
}

 JS

	/* tab切换案例 */
	//获取img节点,获取到img为数组
	let img = document.getElementsByTagName("img")[0];

	//设置上一张点击按钮方法
	const prev = document.getElementById("prev");

	//设置下一张点击按钮方法
	const next = document.getElementById("next");

	//保存img路径
	const imgArr = ['../img/2.jpg', '../img/3.jpg', '../img/4.jpg', '../img/5.jpg', '../img/6.jpg', '../img/7.jpg', '../img/8.jpg', '../img/9.jpg', ];

	//设置索引，记录当前图面索引
	let index = 0;

	// 设置点击事件
	prev.onclick = function () {

		//点击上一张索引自减
		index--;

		//判断img索引，当索引为0时点击上一张索引为-1没有图片，将索引赋值为7实现循环
		if (index == -1){
			index = 7;
		}
		// 修改img的src的值，
		img.src = imgArr[index];
	}

	// 设置点击事件
	next.onclick = function () {

		//点击下一张索引自增
		index++;

		//判断img索引，当索引为imgArr最大长度时点击上一张索引为imgArr没有图片，将索引赋值为0实现循环
		if (index == imgArr.length){
			index = 0;
		}

		// 修改img的src的值
		img.src = imgArr[index];
	}