JavaScript实现网页轮播图

最新推荐文章于 2024-09-29 14:00:00 发布

山海观雾QAQ

最新推荐文章于 2024-09-29 14:00:00 发布

阅读量3.3k

点赞数 8

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/lrelia1/article/details/121470439

版权

本文详细介绍了如何使用JavaScript实现网页轮播图，包括功能需求、基础结构搭建和JavaScript功能实现，如鼠标悬停按钮显示、底部小圆圈生成、图片滑动、自动播放等。还讲解了如何通过动画、事件监听以及节流阀控制实现轮播图的无缝滚动效果。

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

轮播图也成为焦点图，是网页中比较常见的网页特效

一.功能：

1.鼠标经过轮播图模块，左右两边的按钮显示，鼠标离开轮播图模块，就隐藏左右按钮。

2.点击右（左）侧按钮一次，图片往左（右）播放一张，一以此类推，点击几次按钮，就顺序播放几张图片。

3.图片播放的同时，下面的小圈圈模块也跟随一起变化。

4.点击小圆圈，可以播放相应的图片。

5.鼠标不经过轮播图，轮播图也会自动播放图片。鼠标经过轮播图，自动播放就会停止。

二.过程：

1.基础结构的搭建（html和css）

首先需要准备一个盒子，盒子里面有三个部分，第一个部分再左右两边用来实现左右两侧按钮箭头，第二部分用来实现底部小圆圈第三部分则装ul来中央实现图片的滚动。

对于所放图片必须放在一行上，才能实现图片的左右转换，因此需要将图片所在的ul的宽度足够快，比盒子的宽度大很多（至少比所有图片的总和宽度大），然后要加浮动，才能将图片放在一行上

2.轮播图的功能特效（JavaScript）

(1)鼠标经过离开轮播图左右按钮显示隐藏

先用css设置左右两个按钮先隐藏起来，然后绑定鼠标经过和离开事件，当经过时按钮显示，当鼠标离开轮播图页面时候就隐藏起来。

(2)自动生成底部的小圆圈

核心：小圆圈的个数=图片张数

利用for循坏，先创造一个节点creatElement()，然后把创造的节点appendChild()插入到ol里去，循坏图片的张数次。然后ol里面的第一个小li设置为类名为selectd 表示被选中了。

(3)点击小圆圈实现图片滑动

排他思想：干掉所有人，留下我自己

滚动图片算法：点击某个小圆，就让图片滚动，小圆圈的索引号×图片的宽度作为ul的移动距离。

滑动需要引用动画，因此需要自己封装一个animate（）动画函数（也可以使用jQuery中的animate（））。动画函数必须定位才能移动，因此需要对ul需要设置绝对定位。

直接在生成小圆圈的同时绑定点击事件，然后清除所有小li的selected被选择的类名，将当前的小li的类名设置为selected。然后取图片的宽度，再设置自定义属性（在生成小圆圈的时候，来记录当前的索引号），点击了某个小li就需要拿到当前小li的索引号，根据算法和利用animate（）函数实现图片滚动效果。