在前端开发中，图片轮播效果是非常常见的功能之一。本文将介绍如何使用Jquery实现图片轮播效果并提供示例代码。
实现思路
- 建立一个包含图片的容器和一个指示器的HTML结构。
- 使用CSS样式设置图片容器和指示器样式。
- 通过Jquery获取图片容器和指示器元素。
- 设置图片轮播的定时器，每隔一段时间就切换图片。
- 在切换图片时，需要改变当前显示图片和指示器的状态。
HTML结构
-- -------------------- ---- -------
---- ---------------
--- -------------------
-------- ----------------------
-------- ----------------------
-------- ----------------------
-------- ----------------------
-----
--- -------------------
--- --------------------
---------
---------
---------
-----
------其中，.slider是整个轮播图容器的类名，.slider-img是存放所有图片的容器，.slider-nav是指示器容器，li元素代表每张图片和指示器的状态。
CSS样式
-- -------------------- ---- ------- ------- - --------- --------- ------ ------ ------- ------ ------- - ----- --------- ------- - ----------- - --------- --------- ------ ------- ------- ------ ----- -- ---- -- - ----------- -- - ------ ----- ------ ------ ------- ------ - ----------- - --------- --------- ------- ----- ------ ----- -------- -- ---------- -- - ----------- -- - -------- ------------- ------ ----- ------- ----- ------------ ---- ----------------- ----- -------------- ---- ------- -------- - ----------- --------- - ----------------- ----- -
其中，.slider的宽度和高度需要根据实际需求设置，.slider-img的宽度需要根据图片数量和容器宽度计算。指示器容器使用position: absolute定位于轮播图底部，使用font-size: 0去除指示器间隙。
Jquery代码
-- -------------------- ---- -------
------------ -
--- ------------ -- -------
--- ----- - -- -- ---------
-------------- ---------------------------------- -- -----------
-------- -------- -
--------
-- ------ --- -------------- ------------ -
----- - --
-
-------------------------------------- ------ - ----- ----- -- ----
-------------- ------------------------------------------------------------------- -- -------
-
----------- - ------------------- ------ -- -----
-------------- --------------------- - -- ---------
----- - ----------------
-------------------------------------- ------ - ----- -----
------------------------------------------------------------
---
----------------------------- - -- ----------
---------------------------
-- ---------- -
----------- - ------------------- ------
---
---首先使用$(function() {})包裹整个代码，确保在DOM结构加载完成后执行。然后定义变量sliderTimer和index，分别表示定时器和当前图片索引。接着初始化第一个指示器状态，并定义slider()函数用于
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3866