JavaScript实现图片轮播

最新推荐文章于 2021-06-15 21:18:31 发布

孔融不吃梨

最新推荐文章于 2021-06-15 21:18:31 发布

阅读量360

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_38455564/article/details/81661325

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

运行效果图：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			#main{width: 590px;height: 470px;border: 1px solid red;margin:50px auto;position:relative}
			#main ul{position: absolute;right:10px;bottom: 10px;}
			#main ul li{list-style: none;float: left;border: 1px solid gray;width: 30px;height: 30px;text-align: center;background-color:blue;opacity: 0.5;}
			#main ul li:first-child{background-color: red;}
			#main ul li a{text-decoration: none;font: 17px/30px 微软雅黑 ;color: white;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var t=window.setInterval("changeImage()",2000);
				var li_arr=document.getElementById("main").getElementsByTagName("li");
				//鼠标放右下角某个数字上，停止轮播并显示对应图片
				for(var i=0;i<li_arr.length;i++){
					li_arr[i].onmouseover=function(){
						window.clearInterval(t);
						var val=this.innerText;
						index=parseInt(val)-1;
						showImage();
					}
					//鼠标移走，继续轮播
					li_arr[i].onmouseout=function(){
						t=window.setInterval("changeImage()",2000);
					}
				}
			}
			var imgs=["a1.jpg","a2.jpg","a3.jpg","a4.jpg","a5.jpg"];
			var index=0;
			//调用使图片轮播
			function changeImage(){
				index++;
				if(index>=imgs.length){
					index=0;
				}
				showImage();
			}
			//显示相应图片，图片发生变化，右下角数字也发生相应变化
			function showImage(){
				document.getElementById("ad_img").src="image/"+imgs[index];
			var li_arr=document.getElementById("main").getElementsByTagName("li");
				for (var i=0;i<li_arr.length;i++) {
					if(li_arr[i].innerText==index+1){
						li_arr[i].style.backgroundColor="red";
					}else{
						li_arr[i].style.backgroundColor="blue";
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="main">
			<img src="image/a1.jpg" id="ad_img"/>
			<ul>
				<li><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
				<li><a href="">4</a></li>
				<li><a href="">5</a></li>
			</ul>
		</div>
	</body>
</html>