JS+jQuery+CSS实现（简单小项目：轮播图）

最新推荐文章于 2024-08-16 17:20:49 发布

爱打球的切图仔

最新推荐文章于 2024-08-16 17:20:49 发布

阅读量324

点赞数

分类专栏： JS/HTML/CSS 文章标签： html5 html javascript jquery css3

本文链接：https://blog.csdn.net/m0_52581449/article/details/113097804

版权

本文是前端新手对于使用JS、jQuery和CSS实现轮播图的一个简单项目分享。通过元素定位的方法，创建一个包含定时自动轮播、导航点击切换和鼠标悬停暂停的轮播图。详细介绍了HTML结构、CSS样式以及JavaScript功能实现的代码和逻辑。

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

JS+jQuery+CSS实现（简单小项目：轮播图）

写在前边：
本人前端小白一枚，思路方式还停留在切图仔的水平，说的胡乱的地方还望大牛指正。另外轮播图有很多的实现方式，比如：

依靠定位元素的移动。对排列一排的图片进行移动实现图片的轮播。
通过数组：依靠img标签中src属性实现图片轮播。（数组中存放的是每张图片的路径，通过更更改src属性的值就可以实现图片的更改）；

下面介绍第一个方法：（依靠元素定位）

大概的流程是用一个div包裹4张图片，让图片向左浮动。div设置固定的一张图片的高度和宽度（顺便设置div溢出隐藏。）

图片侵删！

html代码如下：

<div class="right">
            <div class="box">
            <img src="./图片素材/girl2.jpg" alt="" srcset="">
            <img src="./图片素材/KDA.jpg" alt="" srcset="">
            <img src="./图片素材/sight1.jpg" alt="" srcset="">
            <img src="./图片素材/sight2.jpg