基于jQuery实现自动或点击切换效果

最新推荐文章于 2022-11-14 10:58:03 发布

苦涩2020

最新推荐文章于 2022-11-14 10:58:03 发布

阅读量1k

点赞数 2

分类专栏：案例练习前端文章标签： jquery

本文链接：https://blog.csdn.net/UserPython/article/details/107074204

版权

效果图

在这里插入图片描述

功能：元素自动切换，当点击下方小圆点时，控制上方元素同步切换

方法：主要是定义一个全局变量，通过自增变化来控制自动切换效果，其中当自身显示时，兄弟元素隐藏；给小圆点添加单击事件，当点击时，传递自身对象给单击切换函数，通过对象获取点击对象的下标值，从而切换元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="./jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #box{
    
            width: 800px; height: 340px; 
            margin: 100px auto;
            position: relative;
        }
        .aaa{
    
            width: 800px; height: 300px; 
            line-height: 300px; text-align: center;
            font-size: 100px; color: #fff;
            position

最低0.47元/天解锁文章

苦涩2020

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
基于jQuery实现自动或点击切换效果

效果图功能：元素自动切换，当点击下方小圆点时，控制上方元素同步切换方法：主要是定义一个全局变量，通过自增变化来控制自动切换效果，其中当自身显示时，兄弟元素隐藏；给小圆点添加单击事件，当点击时，传递自身对象给单击切换函数，通过对象获取点击对象的下标值，从而切换元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</.
复制链接

扫一扫