js实现自动轮播图以及数字按钮组

最新推荐文章于 2022-04-06 20:58:24 发布

高中不复，大学纷飞

最新推荐文章于 2022-04-06 20:58:24 发布

阅读量897

点赞数 1

文章标签： js 图片轮播图

本文链接：https://blog.csdn.net/qq_44760912/article/details/103189199

版权

自动切换图片、数字按钮组及数字按钮click事件

该代码来自《web标准网页设计原理与制作技术》该书籍

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title>自动切换图片、数字按钮组及数字按钮click事件</title>
		<style>
			#pictureBox {
				position: relative;
				border: 1px solid black;
			}/*图片框*/
			#pictureBox img {
				border-width: 0px;
				overflow: hidden;
			}/*图片*/
			#buttonGroup {
				position: absolute;
				left: 0px;
				bottom: 0px;
				height: 16px;
				background-color: sliver;
				filter: alpha(opacity=60); /*数字按钮组*/
				-moz-opacity:0.6;
				 opacity:0.6;
			}
			#buttonGroup div {
				float: right;
			}
			#buttonGroup span {
				float: left;
				padding: 0 8px;
				border-left: 1px solid #ccc;
				background-color: gray;
				line-height: 16px;
				font-size: 16px;
				color: white;
				cursor: pointer;
			}
		</style>
	</head>
	<body onload="init()">
		<div id="pictureBox"><!---图片框，仅包含图片,数字按钮组----->
			<a href="" id="linkURL"><img src="" id="pic" alt=""/></a><!-----图片及超链接---->
		<div id="buttonGroup"><!---数字按钮组---->
			<div>
				<span id="Button0" onclick="changePictureByClick(0)">1</span>
				<span id="Button1" onclick="changePictureByClick(1)">2</span>
				<span id="Button2" onclick="changePictureByClick(2)">3</span>
				<span id="Button3" onclick="changePictureByClick(3)">4</span>
			</div>
		</div>	
		</div>
		<script>
			var pictureBoxWidth=500;//图片框宽度，取其中最小值
			var pictureBoxHeight=341;//图片框高度，取其中最小值
			var imgSrc=new Array("img/1.png","img/2.png","img/3.png","img/4.png");//图片
			var aHref=["http://www.sina.com","http://www.sina.com","http://www.sina.com","http://www.sina.com"];//图片超链接
			var interval=2000;//每张图片延时时间（毫秒）
			var pictureIndex=0;//将要显示的图片编号
			var imgElement=document.getElementById("pic");//获取插入图片的img元素
			var aElement=document.getElementById("linkURL");//获取插入图片上的a元素
			
											//load事件处理函数
			function init() {		//设置图片框的宽度和高度
				var divElement=document.getElementById("pictureBox");
				divElement.style.width=pictureBoxWidth+"px";
				divElement.style.height=pictureBoxHeight+"px";//设置图片的宽度和高度
				imgElement.style.width=pictureBoxWidth+"px";
				imgElement.style.height=pictureBoxHeight+"px";
				
				//设置数字按钮组的宽度
				divElement=document.getElementById("buttonGroup");
				divElement.style.width=pictureBoxWidth+"px";
			}
			
			function autoChangePicture(pictureID) {
				imgElement.src=imgSrc[pictureID];//更换图片
				aElement.href=aHref[pictureID];//更换图片超链接
				var previousPictureIndex=(pictureIndex==0)?3:(pictureIndex-1);
				document.getElementById("Button"+previousPictureIndex).style.backgroundColor="gray";
				document.getElementById("Button"+pictureID).style.backgroundColor="red";
				document.getElementById("Button"+pictureID).innerHTML=(pictureID+1).toString();
				pictureIndex=(pictureID+1)%4;
			}
			autoChangePicture(pictureIndex);//每隔interval毫秒调用一次autoChangePicture函数
			var timerID=setInterval("autoChangePicture(pictureIndex)",interval);
			//鼠标滑过图片时，暂停图片切换
			imgElement.onmouseover=function() {
				clearInterval(timerID);
			}
			//鼠标离开图片时，继续图片自动切换
			imgElement.onmouseout=function() {
				timerID=setInterval("autoChangePicture(pictureIndex)",interval);
			}
			
			function changePictureByClick(newPictureIndex) {
				clearInterval(timerID);
				autoChangePicture(newPictureIndex);
				timerID=setInterval("autoChangePicture(PictureIndex)",interval);
			}
		</script>
	</body>
</html>

读者可自我体会，原理暂不概述。

高中不复，大学纷飞

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现自动轮播图以及数字按钮组

自动切换图片、数字按钮组及数字按钮click事件该代码来自《web标准网页设计原理与制作技术》该书籍完整代码如下：<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title>自动切换图片、数字按钮组及数字按钮click事件</title> ...
复制链接

扫一扫