本文共 1490 字，大约阅读时间需要 4 分钟。

JavaScript编写的轮播页面

HTML：

			
   				
   						
   
			
    			
    
				
     
1
				
     
2
				
     
3
				
     
4
				
     
5
			
    
			
    
     <
    
			
    
     >
    
		
   
			

CSS:

*{	padding: 0;	margin: 0;}/*总体界面样式*/#box{	width: 600px;	height: 240px;	margin: 0 auto;	position: relative;}/*左右切换按钮*/.bt{	width: 40px;	height: 60px;	background-color: rgba(0,0,0,0.2);	color: #FFFFFF;	font-size: 30px;	font-weight: 50px;	/*居中*/	line-height: 60px;	text-align: center;	/*绝对定位*/	position: absolute;	/*鼠标没移动到上面时隐藏*/	display: none;}#left{	left: 0;	top: 100px;}#right{	right: 0;	top: 100px;}/*下面轮播小圆点*/#list{	position: absolute;	bottom: 10px;	left: 200px;	/*消去前面的点*/	list-style: none;}#list li{	/* 浮动变成一行 */	float: left;	width: 20px;	height: 20px;	border-radius: 50%;	background-color: #aaa;	/*居中*/	text-align: center;	line-height: 20px;	margin-left: 10px;}

JavaScript：

//需要用到的标签var jsbox = document.getElementById("box");var jspic = document.getElementById("pic");var left = document.getElementById("left");var right = document.getElementById("right");var jslistarr = document.getElementsByTagName("li");//第一个li设置为红色jslistarr[0].style.backgroundColor = "red"//启动一个定时器去更换pic中的src属性var currentPage = 1//改变页面方法function changePage(){	if(currentPage == 6){		currentPage = 1	}else if(currentPage == 0){		currentPage = 5	}	jspic.src = "img/"+currentPage+".png"	//清空小圆点颜色	for(var i = 0;i

运行结果：

当鼠标没有移入界面时图片自动轮播

鼠标移入界面时，出现左右按钮，并且停止自动轮播 

可以点击左右按钮来轮播图片，也可以将鼠标移动到对应的小圆点上进行轮播 

一起学习，一起进步 -.- ，如有错误，可以发评论 

转载地址：https://kongchengji.blog.csdn.net/article/details/98495608 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！