博客

jQuery动画，幻灯片方法与实例

  • Post category:jquery

jQuery动画，幻灯片方法与实例

1. jQuery动画

jQuery提供了大量的动画方法，使得网页动态化效果更加丰富多彩。下面介绍一些常用的动画方法及其使用说明。

1.1 基本动画

基本动画用来对HTML元素进行简单的动画效果，比如移动、颜色变化等。

1.1.1 动画方法

  • .show(): 显示被隐藏的 HTML 元素
  • .hide(): 隐藏不需要显示的 HTML 元素
  • .toggle(): 切换元素的可见状态
  • .fadeIn(): 淡入显示被隐藏的 HTML 元素
  • .fadeOut(): 淡出不需要显示的 HTML 元素
  • .fadeToggle(): 切换元素的淡入淡出效果
  • .slideUp():向上滑动隐藏 HTML 元素
  • .slideDown(): 向下滑动显示 HTML 元素
  • .slideToggle(): 切换元素的滑动效果

1.1.2 实例

<!DOCTYPE html>
<html>
<head>
    <title>示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <div></div>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <button id="toggle">切换</button>
    <script>
        $(function(){
            $('#show').click(function(){
                $('div').show(1000);
            })
            $('#hide').click(function(){
                $('div').hide(1000);
            })
            $('#toggle').click(function(){
                $('div').toggle(1000);
            })
        })
    </script>
</body>
</html>

上述代码是一个简单动画效果的示例代码。其中三个按钮分别对应了三种基本动画方法，并且每个方法的时间为1s，即1000ms。

2. 幻灯片方法

幻灯片方法是通过图片轮播来展示多张图片，并且可以通过自动播放、手动切换等方式来进行展示。

2.1 幻灯片方法

  • .fadeIn(): 通过淡入的方式展示图片
  • .fadeOut(): 通过淡出的方式展示图片
  • .animate(): 通过动画来展示图片，可自定义动画效果
  • .delay(): 延迟动画效果的执行时间
  • .queue(): 防止动画效果的排队效果

2.2 实例

<!DOCTYPE html>
<html>
<head>
    <title>示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .banner{
            width: 500px;
            height: 300px;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .banner img{
            position: absolute;
            top: 0;
            left: 0;
            width: 500px;
            height: 300px;
            display: none;
        }
        .pagination{
            width: 100%;
            height: 20px;
            position: absolute;
            bottom: 0;
            left: 0;
            text-align: center;
            background-color: rgba(255,255,255,.5);
        }
        .pagination span{
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }
        .pagination .active{
            background-color: white;
        }
        .btn{
            width: 40px;
            height: 40px;
            background-color: rgba(0,0,0,.5);
            position: absolute;
            top: 50%;
            margin-top: -20px;
            color: white;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            cursor: pointer;
        }
        .prev{
            left: 0;
        }
        .next{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="images/banner1.jpg" alt="">
        <img src="images/banner2.jpg" alt="">
        <img src="images/banner3.jpg" alt="">
        <img src="images/banner4.jpg" alt="">
        <img src="images/banner5.jpg" alt="">
        <div class="pagination">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="btn prev">《</div>
        <div class="btn next">》</div>
    </div>
    <script>
        var index = 0;
        var timer;
        $(function(){

            // 点击按钮进行图片的切换
            $('.pagination span').click(function(){
                index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.banner img').eq(index).fadeIn().siblings().fadeOut();
            })
            // 上一张
            $('.prev').click(function(){
                index--;
                if(index<0){
                    index = 4;
                }
                $('.pagination span').eq(index).addClass('active').siblings().removeClass('active');
                $('.banner img').eq(index).fadeIn().siblings().fadeOut();
            })
            // 下一张
            $('.next').click(function(){
                index++;
                if(index>4){
                    index = 0;
                }
                $('.pagination span').eq(index).addClass('active').siblings().removeClass('active');
                $('.banner img').eq(index).fadeIn().siblings().fadeOut();
            })

            //自动播放
            autoPlay();
            //鼠标移入移出控制自动播放
            $('.banner').hover(function(){
                clearInterval(timer);
            }, function(){
                autoPlay();
            })
        })
        // 自动播放函数
        function autoPlay(){
            timer = setInterval(function(){
                $('.next').trigger('click');
            }, 2000)
        }
    </script>
</body>
</html>

上述代码是一个幻灯片的轮播效果示例，实现过程中使用了基本动画方法以及幻灯片方法的部分。其中：

  • banner是轮播图的容器，overflow为hidden，表示隐藏超出容器部分的元素
  • banner img是轮播的图片，绝对定位，通过淡入淡出来实现图片的切换效果
  • pagination是页码，表示当前显示的是第几张图片，通过切换页码来实现图片的切换
  • prev和next是左右切换的按钮，通过触发上一张和下一张按钮来实现图片的切换
  • autoPlay是用来实现图片自动播放的函数，每隔2s触发一次next按钮来切换图片

总结

通过学习本文所介绍的内容，希望您能够掌握jQuery中一些基本动画方法和幻灯片方法的使用技巧，并通过实际的演示代码进行理解。同时，也要注意在实际开发中尽可能地简化代码、增强代码可读性与可维护性。

Tags: