前端js实现轮播图

最新推荐文章于 2024-07-24 21:47:58 发布

java.小小白

最新推荐文章于 2024-07-24 21:47:58 发布

阅读量371

点赞数

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

男孩@qq1603853843

本文链接：https://blog.csdn.net/weixin_47427198/article/details/106665160

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

根据学到的javaScript简单写了个轮播图
前端代码

<body onload="onload_img()">
		<div id="id">
			<img src="img/dc.jpg" id="img" />
		</div>
		<ul>
			<li class="li" onclick="changeImg('img/dc.jpg',0)">1</li>
			<li class="li" onclick="changeImg('img/dq.jpg',1)">2</li>
			<li class="li" onclick="changeImg('img/dj.jpg',2)">3</li>
		</ul>
		<script src="js/lunbo.js" type="text/javascript"></script>
	</body>

js代码

//获取图片
var img = document.getElementById("img");
//获取li节点
var lis = document.getElementsByClassName("li");
//开始加载
function onload_img(){
	setInterval(dong_img,"2000");
}
//设下标初始值
var index=0;
lis[index].style.backgroundColor = "#FF0000";
function dong_img(){
	//图片封装成一个数组
	var img_array = ["img/dc.jpg","img/dq.jpg","img/dj.jpg"];
	//把上一个li的背景颜色还原
	lis[index].style.backgroundColor = "";
	//下标加一
	index = (index+1)%img_array.length;
	//li加背景颜色
	lis[index].style.backgroundColor = "#FF0000";
	//变换图片
	img.setAttribute("src",img_array[index]);
}
//当点击li时执行
function changeImg(path,num){
	//把上一个li的背景颜色还原
	lis[index].style.backgroundColor = "";
	//当前li添加背景色
	lis[num].style.backgroundColor = "#FF0000";
	//下标赋值下次循环使用
	index = num;
	//变换图片
	img.setAttribute("src",path);
}

css样式

<style type="text/css">
		<!--边框清零-->
		*{
			margin: 0px;
			padding: 0px;;
		}
		#id{
			width: 400px;
			height: 200px;
			<!--设置绝对定位-->
			position: absolute ;
		}
		img{
			<!--设置图片宽高-->
			width: 400px;
			height: 200px;
		}
		ul{
			color: #FFFFFF;
			font-weight: bold;
			<!--设置绝对定位-->
			position: absolute;
			top: 180px;
			left: 310px;
			list-style-type: none;
			text-align: center;
		}
		ul li{
			<!--li浮动-->
			float: left;
			width:20px;
			height: 20px;
			border: 1px solid #ffffff;
			border-radius: 50%;
			margin-right:10px ;
			line-height: 20px;
		}
		ul li:hover {
			background-color: red;
		}
	</style>