AI 助理
备案控制台
开发者社区 云计算 文章 正文

轮播图动画

2022-10-13 175
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 轮播图动画

1.普通轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 轮播图区域 */
         .box{
            width: 560px;
            height: 300px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        /* 图片滚动区域 */
        .content{
            font-size: 0;
            width: 3000px;
            height: 300px;
            display: inline-block;
            position: absolute;
        }
        /* 下方序列按钮 */
        .btns{
            position: absolute;
            bottom: 30px;
            /* background-color: yellow; */
            width: 560px;
            text-align: center;
        }
        .btns span{
            padding: 6px;
            border-radius: 50%;
            background-color: white;
            font-size: 0px;
            margin: 0 8px;
        }
        .btns .choose{
            background-color: red;
        }
        .pre,
        .next{
            position: absolute;
            top: 50%;
            color: white;
            font-size: 30px;
            right: 0px;
            height: 50px;
            width: 30px;
            text-align: center;
            line-height: 50px;
            background-color: rgba(0,0,0,0.6);
        }
        .pre{
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <img src="img/0.jpg" alt="">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
        </div>
        <div class="btns">
            <span class="choose"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="pre">&lt;</div>
        <div class="next">&gt;</div>       
    </div>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        var $img = $('.content');
        var $btns = $('.btns span');
        var $pre = $('.pre');
        var $next = $('.next');
        var index =0;
        var timebar;
        // 轮播函数 
        function startInterval(){
            // 轮播定时器
            timebar = setInterval(function(){
                if(index >=4){
                    index = 0;
                }else{
                    index++;
                }
                // 调用切换动画
                change();       
                },2000);
            }
        // 切换动画函数
        function change(fn){
            $img.stop(true).animate({left: -560*index},800);         
            $btns.eq(index).addClass('choose');
            $btns.eq(index).siblings().removeClass('choose');
            fn && fn();
        }
        // 加载完毕启动动画
        startInterval();
        // 绑定点击向左轮播
        $pre.click(function(){
            // 清除timebar定时器
            clearInterval(timebar);
            // 边界判断
            if(index <= 0){
                index = 4;
            }else{
                index--;
            }
            // 完成后，加入定时器
            change(startInterval);
        })
        // 绑定点击向右轮播
        $next.click(function(){
            // 清除timebar定时器
            clearInterval(timebar);
            // 边界判断
            if(index >= 4){
                index = 0;
            }else{
                index++;
            }
            // 完成后，加入定时器
            change(startInterval);
        })
        // 绑定点击下标按钮轮播
        $btns.click(function(){
            // 清除timebar定时器
            clearInterval(timebar);
            index = $(this).index();
            change(startInterval);
        })
    </script>
</body>
</html>


2.猫腻轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 轮播图区域 */
         .box{
            width: 560px;
            height: 300px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        /* 图片滚动区域 */
        .content{
            font-size: 0;
            width: 5000px;
            height: 300px;
            display: inline-block;
            position: absolute;
        }
        /* 下方序列按钮 */
        .btns{
            position: absolute;
            bottom: 30px;
            /* background-color: yellow; */
            width: 560px;
            text-align: center;
        }
        .btns span{
            padding: 6px;
            border-radius: 50%;
            background-color: white;
            font-size: 0px;
            margin: 0 8px;
        }
        .btns .choose{
            background-color: red;
        }
        .pre,
        .next{
            position: absolute;
            top: 50%;
            color: white;
            font-size: 30px;
            right: 0px;
            height: 50px;
            width: 30px;
            text-align: center;
            line-height: 50px;
            background-color: rgba(0,0,0,0.6);
        }
        .pre{
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <img src="img/4.jpg" alt="">
            <img src="img/0.jpg" alt="">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/0.jpg" alt="">
        </div>
        <div class="btns">
            <span class="choose"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="pre">&lt;</div>
        <div class="next">&gt;</div>       
    </div>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        var $img = $('.content');
        var $btns = $('.btns span');
        var $pre = $('.pre');
        var $next = $('.next');
        var index = 1;
        var timebar;
        // 轮播函数 
        function startInterval(){
            // 轮播定时器
            timebar = setInterval(function(){
                index ++;
                if(index >= 7){
                    index = 0;
                }
                // 调用切换动画
                change();       
            },2000);
        }
        // 切换动画函数
        function change(fn){
            $img.stop(true).animate({left: -560*index},500,function(){
                if(index === 6){
                    index = 1;
                    $img.css('left',-560*index);
                }else if(index ===0){
                    index = 5;
                    $img.css('left',-560*index)
                }
                $btns.eq(index-1).addClass('choose');
                $btns.eq(index-1).siblings().removeClass('choose');
                fn && fn();
            });         
        }
        // 默认第一张显示index = 1
        $img.css('left',-560*index);
        // 加载完毕启动动画
        startInterval();     
        // 绑定点击向左轮播
        $pre.click(function(){
            // 清除timebar定时器
            clearInterval(timebar);
            // 边界判断
            index--;
            if(index < 0){
                index = 4;
            }
            // 完成后，加入定时器
            change(startInterval);
        })
        // 绑定点击向右轮播
        $next.click(function(){
            // 清除timebar定时器
            clearInterval(timebar);
            // 边界判断
            index++;
            if (index >= 7) {
                index = 0;
            }
            // 完成后，加入定时器
            change(startInterval);
        })
        // 绑定点击下标按钮轮播
        $btns.click(function(){
            // 清除timebar定时器
            clearInterval(timebar);
            index = $(this).index()+1;
            change(startInterval);
        })
    </script>
</body>
</html>


3.最后一张设置猫腻图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 轮播图区域 */
         .box{
            width: 560px;
            height: 300px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        /* 图片滚动区域 */
        .content{
            font-size: 0;
            width: 5000px;
            height: 300px;
            display: inline-block;
            position: absolute;
        }
        /* 下方序列按钮 */
        .btns{
            position: absolute;
            bottom: 30px;
            /* background-color: yellow; */
            width: 560px;
            text-align: center;
        }
        .btns span{
            padding: 6px;
            border-radius: 50%;
            background-color: white;
            font-size: 0px;
            margin: 0 8px;
        }
        .btns .choose{
            background-color: red;
        }
        .pre,
        .next{
            position: absolute;
            top: 50%;
            color: white;
            font-size: 30px;
            right: 0px;
            height: 50px;
            width: 30px;
            text-align: center;
            line-height: 50px;
            background-color: rgba(0,0,0,0.6);
        }
        .pre{
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <img src="img/0.jpg" alt="">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/0.jpg" alt="">
        </div>
        <div class="btns">
            <span class="choose"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="pre">&lt;</div>
        <div class="next">&gt;</div>       
    </div>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        var $img = $('.content');
        var $btns = $('.btns span');
        var $pre = $('.pre');
        var $next = $('.next');
        var index = 0;
        var timebar;
        // 轮播函数 
        function startInterval(){
            // 轮播定时器
            timebar = setInterval(function(){
                index ++;
                if(index >= 6){
                    index = 0;
                }
                // 调用切换动画
                change();       
            },2000);
        }
        // 切换动画函数
        function change(fn){
            $img.stop(true).animate({left: -560*index},500,function(){
                if(index === 5){
                    index = 0;
                    $img.css('left',-560*index);
                }
                $btns.eq(index).addClass('choose');
                $btns.eq(index).siblings().removeClass('choose');
                fn && fn();
            });         
        }
        // 默认第一张显示index = 1
        $img.css('left',-560*index);
        // 加载完毕启动动画
        startInterval();     
        // 绑定点击向左轮播
        $pre.click(function(){
            // 清除timebar定时器
            clearInterval(timebar);
            // 边界判断
            index--;
            if(index < 0){
                index = 4;
                // 
                $img.css('left',-560*5)
            }
            // 完成后，加入定时器
            change(startInterval);
        })
        // 绑定点击向右轮播
        $next.click(function(){
            // 清除timebar定时器
            clearInterval(timebar);
            // 边界判断
            index++;
            if (index >= 6) {
                index = 0;
            }
            // 完成后，加入定时器
            change(startInterval);
        })
        // 绑定点击下标按钮轮播
        $btns.click(function(){
            // 清除timebar定时器
            clearInterval(timebar);
            index = $(this).index();
            change(startInterval);
        })
    </script>
</body>
</html>


4.三点轮播图


游客gvbjrs3kxg3za
目录
相关文章
daisy`
|
7月前
CSS3滑动轮播动画
CSS3滑动轮播动画
daisy`
59 8
游客ogeeqvh5vfa5q
|
11天前
轮播图片上添加描述
在轮播图片中添加描述，通过在每个`&lt;div class=&quot;carousel-item&quot;&gt;`内加入`&lt;div class=&quot;carousel-caption&quot;&gt;`来设置图片描述。示例展示了如何为轮播图添加标题和内容，并介绍了相关类的作用，如`.carousel`创建轮播、`.carousel-indicators`添加指示符等，实现图片的切换及动画效果。
游客ogeeqvh5vfa5q
20 0
轮播图片上添加描述
疯狂的猿
|
24天前
好看的时间轴轮播特效代码
好看的时间轴轮播特效代码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面
疯狂的猿
7 0
Li370234940
|
2月前
“节流阀“ 在轮播图的使用
“节流阀“ 在轮播图的使用
Li370234940
27 1
游客fz577umxdejsg
|
4月前
|
移动开发 前端开发 JavaScript
HTML+CSS动画打造酷炫轮播图！（含源码）
HTML+CSS动画打造酷炫轮播图！（含源码）
游客fz577umxdejsg
85 1
写代码的大学生
|
6月前
|
前端开发 UED
CSS动画（轮播图）
CSS动画（轮播图）
写代码的大学生
53 0
朝阳39
|
5月前
|
前端开发
css特效动画——转圈的加载动画
css特效动画——转圈的加载动画
朝阳39
78 0
find_starshine
|
7月前
|
JavaScript 前端开发 索引
用四种方法实现轮播图
用四种方法实现轮播图
find_starshine
148 0
极客李华
|
7月前
|
前端开发 JavaScript
轮播图的实现
轮播图的实现
极客李华
42 0
王同学睡醒了
|
前端开发
HTML+CSS实现轮播图效果
HTML+CSS实现轮播图效果
王同学睡醒了
89 0