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

轮播图动画

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

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`
|
6月前
CSS3滑动轮播动画
CSS3滑动轮播动画
daisy`
57 8
卡尔特斯
|
JavaScript
jQuery 滑入滑出动画 slideDown()； slideUp()； slideToggle()；
jQuery 滑入滑出动画 slideDown()； slideUp()； slideToggle()；
卡尔特斯
79 0
游客fz577umxdejsg
|
3月前
|
移动开发 前端开发 JavaScript
HTML+CSS动画打造酷炫轮播图！（含源码）
HTML+CSS动画打造酷炫轮播图！（含源码）
游客fz577umxdejsg
81 1
写代码的大学生
|
5月前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
写代码的大学生
51 3
她说她一如既往的爱我
|
5月前
Vue3.0组件—banner轮播图（渐入渐隐效果）
Vue3.0组件—banner轮播图（渐入渐隐效果）
她说她一如既往的爱我
472 3
写代码的大学生
|
5月前
|
前端开发 UED
CSS动画（轮播图）
CSS动画（轮播图）
写代码的大学生
48 0
朝阳39
|
4月前
|
前端开发
css特效动画——转圈的加载动画
css特效动画——转圈的加载动画
朝阳39
72 0
bug丶小狼人
|
前端开发
超简单的轮播图动画效果 HTML+Css
超简单的轮播图动画效果 HTML+Css
bug丶小狼人
76 0
兜里只有三分钱~
swiper轮播-可支持触摸滑动（整理）
swiper轮播-可支持触摸滑动（整理）
兜里只有三分钱~
58 0
swiper轮播-可支持触摸滑动（整理）
南城FE
|
前端开发
CSS动画篇之404动画
CSS动画篇之404动画
南城FE
154 0