如何实现PC端网站的轮播图制作(pc端如何上外网)

2024-01-21 分类：网站建设

在PC网页上我们随处可以看到很多形形色色的轮播图，今天我们来做个PC端简单的轮播图，不需要都多么高深的技术，只要会简单的html、css、js就行了；需要引入jq库，这里我是1.11版本，我们先来看看效果图，如图：

效果图我做的一般般，需要美化的可以自行添加效果，在这里我就不演示了。

代码分为三个部分如图：

1、html：
用一个div容器carousel包裹整个轮播图，放置图片或其他内容的用carousel-wrap容器包裹，指示器用indicator容器，左右箭头用arrow-wrap容器。

2、css：
包裹整个轮播图的div容器carousel宽度可以自行设置，这里设置的是500px，高度300px，溢出隐藏（overflow: hidden），这里注意carousel要绝对定位，轮播图的指示器indicator要相对定位，以便于悬浮在轮播图上面以及可以点击到指示器；左右箭头同指示器同理。

3、js：

首先如上图指示器部分的JS，结合html的元素slide（存放图片或其他）第一个默认有个类名on，当点击指示器任意一个时js获取点击当前指示器的下标，同时赋予相对应元素slide类名on，结合css有on类名的显示，没有on类名隐藏，从而指示器控制了图片的隐藏显示；左右箭头控制图片的上一张或下一张显示隐藏，以左箭头为例，同理指示器点击时添加删除类名on，不过多了一步下标的加减还有判断，有不懂的可以看看上图。
这样一个简单的PC端轮播图就出来了。

以上就是关于如何实现PC端网站的轮播图制作(pc端如何上外网)，希望对你有帮助，更多内容关注创新互联。

当前名称：如何实现PC端网站的轮播图制作(pc端如何上外网)
本文网址：https://www.cdcxhl.com/news30/314730.html

成都网站建设公司_创新互联，为您提供手机网站建设、网站维护、网站制作、搜索引擎优化、品牌网站设计、网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容