使用JavaScript实现轮播图效果

最新推荐文章于 2024-03-27 23:42:14 发布

ogeuns

最新推荐文章于 2024-03-27 23:42:14 发布

阅读量298

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/retuJQC/article/details/80440640

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		body {
			height: 8888px;
		}
		.nav {
			height: 100px;
		}
		.nav .nav_inner {
			margin: auto;
			height: 100px;
			width: 1000px;
			background-color: black;
			color: white;
		}
		.banner {
			height: 400px;
		}
		.banner #banner_inner {
			margin: auto;
			height: 400px;
			width: 1000px;
			background-image: url(img/bg0.jpeg);
			background-position: center top;
			position: relative;
			/*背景过渡*/
			transition: all 1s ease;
		}
		.banner #banner_inner .move_left {
			height: 50px;
			width: 30px;
			background-color: black;
			position: absolute;
			top: 165px;
			left: 0px;
			cursor: pointer;
			/*透明度设置0-1*/
			opacity: 0.5;
		}
		.banner #banner_inner .move_left:hover {
			opacity: 0.7;
		}
		.banner #banner_inner .move_right {
			height: 50px;
			width: 30px;
			background-color: black;
			position: absolute;
			top: 165px;
			right: 0px;
			cursor: pointer;
			opacity: 0.5;
		}
		.banner #banner_inner .move_right:hover {
			opacity: 0.7;
		}
		.banner #banner_inner ul.tab_chunks {
			position: absolute;
			list-style: none; 
			bottom: 20px;
			left: 420px;
		}
		.banner #banner_inner ul.tab_chunks li {
			float: left;
			height: 20px;
			width: 20px;
			background-color: red;
			text-align: center;
			line-height: 20px;
			font-size: 20px;
			margin: 4px;
			cursor: pointer;
		}
	</style>
	<script type="text/javascript">

		/*全局變量*/
		var index = 0; 

		/*定时器ID,用于结束定时器任务*/
		var interval;

		/*显示图片DIV*/
		var show_img;

		/*tab切换条*/
		var tab_chunks;

		window.onload = function() {

			/*圖片展示div*/
			show_img = document.getElementById("banner_inner");
			// alert(show_img);

			/*获取切换块,并完成初始化*/
			tab_chunks = document.getElementsByTagName("li");
			tab_chunks[0].style.backgroundColor="yellow";

			/*鼠标经过图片*/
			show_img.onmouseover = function() {
				window.clearInterval(interval);
			}

			/*鼠标离开图片*/
			/*将函数绑定到事件上*/
			show_img.onmouseout = startInterval;
			/*默认执行*/
			startInterval();

			// show_img.onmouseout = function() {
			// 	window.clearInterval(interval);
			// }
		}

		/*启动定时器*/
		function startInterval() {

			interval = window.setInterval(forwardImg, 3000);
			// interval 间隔
		}

		/*三个主要事件*/
		/*1前一张*/
		function forwardImg() {
			index++;
			if(index>5) {
				index = 0;
			}
			changeImg();
		}
		/*2后一张*/
		function backwardImg() {
			index--;
			if(index<0) {
				index = 5;
			}
			changeImg();
		}
		/*3鼠标点击切换块*/
		function jumpImg(num) {
			index = num;
			changeImg();
		}

		/*切换图片*/
		function changeImg() {

			show_img.style.backgroundImage = "url(img/bg" + index + ".jpeg)";
			changeTab();
		}
		/*切换块*/
		function changeTab() {
			for(var i = 0;i < tab_chunks.length;i++) {
				if(i == index) {
					tab_chunks[i].style.backgroundColor = "yellow";
				} else {
					tab_chunks[i].style.backgroundColor = "red";
				}
			}
		}
	</script>
</head>
<body>
	<div class="nav">
		<div class="nav_inner">
			这是网站的导航条
		</div>
	</div>
	<div class="banner">
		<div id="banner_inner">
			<!-- 左右切換條 -->
			<div class="move_left" οnclick="backwardImg();"></div>
			<div class="move_right" οnclick="forwardImg();"></div>
			<!-- tab欄 -->
			<ul class="tab_chunks">
				<li οnclick="jumpImg(0)">1</li>
				<li οnclick="jumpImg(1)">2</li>
				<li οnclick="jumpImg(2);">3</li>
				<li οnclick="jumpImg(3);">4</li>
				<li οnclick="jumpImg(4);">5</li>
				<li οnclick="jumpImg(5);">6</li>
			</ul>
		</div>
	</div>
</body>
</html>