JavaScript轮播图基础学习

（此为课堂学习笔记，记录下方便日后学习）
效果展示：
代码展示：
<!doctype html>

<html>
<!-- 
		学习功能：使用JavaScript实现图片轮播，左右翻转，图片切换显示等。
		author: lisa于2018-5-30
	-->
<title>
	<meta charset="utf-8">
</title>

<body>
	<div class="maindiv">
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			.shidian {
				width: 600px;
				height: 300px;
				position: relative;
			}

			.shidian>#shidian_img {
				width: 100%;
				height: 100%;

			}

			.shidian>#shidian_img li {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
			}

			.shidian>#shidian_img img {
				width: 100%;
				height: 100%;
			}

			.shidian>#shidian_nav li {
				float: left;
				width: 20px;
				height: 20px;
				background: #ffffff;
				border: 1px #ffff00 solid;
				margin-left: 10px;
				text-align: center;
				line-height: 20px;
				list-style: none;
			}

			.shidian>#shidian_nav {
				position: absolute;
				right: 10px;
				bottom: 10px;
			}

			.shidian>#shidian_nav .active {
				background: 0000ff;
				color: black;
				cursor: pointer;
			}

			.shidian .img_nav {
				position: absolute;
				top: 140px;
				width: 100%
			}

			.shidian .img_nav .left {
				cursor: pointer;
			}

			.shidian .img_nav .right {
				cursor: pointer;
				float: right;
			}
		</style>
		<div class="shidian">
			<ul id="shidian_img" onmouseover="stop_img()" onmouseout="start_img()">
				<li><img src="./image/1.jpg" /></li>
				<li><img src="./image/3.jpg" /></li>
				<li><img src="./image/2.jpg" /></li>
				<li><img src="./image/4.jpg" /></li>
			</ul>
			<ul id="shidian_nav">
				<li class="active" onmouseover="show_img1(this);">1</li>
				<li class="active" onmouseover="show_img1(this);">2</li>
				<li class="active" onmouseover="show_img1(this);">3</li>
				<li class="active" onmouseover="show_img1(this);">4</li>
			</ul>
			<div class="img_nav">
				<span class="left" onclick="left_img()"><<</span>
				<span class="right" onclick="right_img()">>></span>
			</div>
		</div>

		<script>
			index = 0;
			imgs = document.getElementById("shidian_img").children; //获得图片节点
			navs = document.getElementById("shidian_nav").children; // 获得右下图片导航的节点

			//下一张轮播图片
			function next_img() {
				index++;
				if (index >= imgs.length) {
					index = 0;
				}
				show_log();
			}

			//正常显示图片
			function show_log() {
				for (i = 0; i < imgs.length; i++) {
					imgs[i].style.display = "none";
					imgs[i].className = "";
				}
				//console.log(index)
				if (index >= imgs.length) {
					index = 0;
				}
				imgs[index].style.display = "block";
				imgs[index].className = "active";
			}
			show_log();
			timer = setInterval(next_img, 1000);

			function stop_img() {
				clearInterval(timer);
			}

			function start_img() {
				timer = setInterval(next_img, 1000);
			}

			//随机切换显示图片
			function show_img1(obj) {
				stop_img();
				index = getIndex(obj.parentNode, obj);
				show_log();

			}

			//向左翻图片
			function left_img() {
				stop_img();
				index--;
				if (index < 0) index = imgs.length - 1;
				show_log();
				start_img();
			}

			//向右翻图片
			function right_img() {
				stop_img();
				index++;
				if (index > imgs.length) index = 0;
				show_log();
				start_img();
			}

			//获得当前的节点
			function getIndex(parent, obj) {
				//console.log(obj.innerHTML);
				e = parent.children;
				for (i = 0; i < e.length; i++) {
					if (e[i] == obj) {
						return i;
					}
				}
			}
		</script>
	</div>
</body>

</html>
JavaScript轮播图基础学习

猜你喜欢
