JavaScript简单的实现轮播图

最新推荐文章于 2023-04-21 23:21:11 发布

永旗狍子

最新推荐文章于 2023-04-21 23:21:11 发布

阅读量482

点赞数

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

本文链接：https://blog.csdn.net/qwq1518346864/article/details/116138319

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript来创建一个自动轮播图，包括在鼠标不操作时1.5秒自动切换图片，鼠标悬停时停止切换，以及点击按钮直接跳转到指定图片的功能。

摘要由CSDN通过智能技术生成

用JavaScript简单的实现轮播图：

1.鼠标不触碰图片时，图片以1.5秒的速度自动播放。

2.鼠标触碰图片时，自动轮播图片停止。

3.鼠标点击1-5时，通过下标跳转到对应的图片。

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>图片轮换</title>
	<link rel="stylesheet" href="css/scroll.css">

</head>

<body>
<div class="scroll" onmouseover="stop()" onmouseout="start()">
	<div id="num">
		<a href="#" >1</a>
		<a href="#" >2</a>
		<a href="#" >3</a>
		<a href="#" >4</a>
		<a href="#" >5</a>
	</div>
	<img src="img/1.gif" alt="图片" id="photo"/>
	
</div>
<script type="text/javascript">
		var imgs=["1.gif","2.gif","3.jpg","4.jpg","5.gif"];
		var aList=document.getElementsByTagName("a");
		
		var index=0;
		for (var i = 0; i < aList.length; i++) {
			aList[i].onclick=function() {
				index=this.innerText-1;
				document.getElementById("photo").setAttribute("src","img/"+imgs[index]);
			}
		}	
		function autoChange () {
			index++;
			if(index>=aList.length){
				index=0;
			}
			var photo=document.getElementById("photo");
			photo.setAttribute("src","img/"+imgs[index]);		
		}		
		var a;
		function start () {
			a=window.setInterval("autoChange()",1500);
		}
		function stop () {
			window.clearInterval(a);
		}
		start();			
	</script>
</body>
</html>


.scroll{width: 360px; height: 190px; overflow: hidden; margin: 0 auto; position: relative;}
a{
    font-size: 14px;
    color: #39F;
    height: 18px;
    width: 20px;
    border: 1px solid #39F;
    text-decoration: none;
    display: block;
    float: left;
    margin-right:5px;
    text-align: center;
    background-color: #FFF;
    line-height: 20px;
}
a:hover {
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    background-color: #39F;
    border: 1px solid #39F;
    text-decoration: none;
    display: block;
}
#num {
    position:absolute;
    width:180px;
    height:25px;
    z-index:2;
    left:100px;
    top: 13px;
}