JavaScript做banner轮播图

最新推荐文章于 2023-10-06 23:43:32 发布

chowhoundgh

最新推荐文章于 2023-10-06 23:43:32 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/qq_43078424/article/details/103281653

版权

本文介绍了如何使用JavaScript创建一个点击图片后下方圆点随之变化的banner轮播图。设计思路包括在body中定义列表和图片，并为图片添加点击事件。CSS用于设计圆点样式，JavaScript实现轮播效果。特别强调了`border-radius`用于制作圆形，`cursor: pointer`改变鼠标指针形状，以及`!important`用于强制设定背景颜色。

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

JavaScript之banner轮播图

轮播图分为两种，一种是点击下方圆点，图片跟随圆点的变化而变化；还有一种是这篇文章要写的：点击图片，下方圆点跟随图片的变化而变化。

设计思路

在body里面定义一个列表，通过css来设计圆点的样式；同时在body里还应该写出第一张显示的图片并设置这个图片的id，为这张图片加上onclick()点击事件；通过JavaScript来实现效果。

body代码如下：

<body>
	<img src="img/a1.jpeg" id="pic" onclick="f()">
	//因为是通过点击图片而变化，所以在图片里得加入onclick()点击事件
	<ul id="list">
	    <li class="bg"></li>
	    //给点击的小圆点设计了样式，样式的类名为bg
	    <li></li>
	    <li></li>
	    <li