js 实现轮播图的原理

最新推荐文章于 2024-04-12 07:49:03 发布

Alphamale️️

最新推荐文章于 2024-04-12 07:49:03 发布

阅读量419

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_45624653/article/details/106493483

版权

本文详细介绍了如何使用JavaScript实现轮播图效果，包括HTML和CSS的基础搭建，以及JavaScript关键代码实现动态切换图片的功能，最后展示了实际的轮播图展示效果。

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

html 和css部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style type="text/css">
		*{
   margin: 0; padding: 0; list-style: none;}
		#banner{width: 1920px; height: 500px; overflow: hidden; position: relative;}
		#imglist{width: 7980px; height: 500px;}
		#imglist li{float: left;}
		#imglist img{width: 100%; height: 100%;}

		#buttons{width: 100%;top: 50%; position: absolute;  cursor: pointer;}
		#buttons span{font-size: 35px; font-weight: bold;}
		#buttons #left{left: 10%; position: absolute;}
		#buttons #right{right: 10%; position: absolute;}

		#iconlist{left: 45%; bottom: 1%; position: absolute; cursor: pointer;}
		#iconlist li{width:30px; height: 30px; float: left; border: 1px solid black; text-align: center; line-height: 30px; margin-left: 10px; border-radius: 18px;}
	</style>
</head>
<body>
	<div id="banner">           
		<ul id="imglist">
			<li><img src=".\img\banner1.jpg" alt="banner1"></li>
			<li><img src=".\img\banner2.jpg" alt="banner2"></li>
			<li><img src=".\img\banner3.jpg" alt="banner3"></li>
			<li><img src=".\img\banner1.jpg" alt="banner1"></li>
		</ul>
		<ul id="buttons">
			<li id="left">

最低0.47元/天解锁文章

Alphamale️️

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现轮播图的原理

html 和css部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> *{margin: 0; padding: 0; list-style: none;} #banner{width: 1920px; height: 500px; overflo
复制链接

扫一扫