网页轮播图的实现

最新推荐文章于 2025-05-22 13:28:11 发布

做一个程序员

最新推荐文章于 2025-05-22 13:28:11 发布

阅读量4.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： python html css css3 javascript

本文链接：https://blog.youkuaiyun.com/weixin_52153452/article/details/121847526

本文介绍了如何实现网页轮播图，包括自动变换图片（2秒切换）、鼠标点击切换、点击小圆圈切换图片以及鼠标经过显示切换按钮等功能。详细代码已分享到Gitee，供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需要实现的目标

1、轮播图实现自动的变换图片（每两秒）

2、鼠标点击实现图片的切换

3、鼠标点击下方小圆圈实现图片的变换

4、鼠标经过显示左右切换的按钮

二、实现的效果

三、部分js代码分享（源码以及项目文件放到了gitee上了需要的话自取链接在最后）

window.addEventListener('load', function () {
    var focus = document.querySelector('.focus_image');
    var ul = focus.querySelector('ul');
    var pre = this.document.querySelector('.pre')
    var next = this.document.querySelector('.next')
    var select = this.document.querySelector('.select');
    var ol = select.querySelector('ol');
    var ulAddLi = ul.children[0].cloneNode(true);
    var num = 0;
    var circle =