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>

轮播图动画

1.普通轮播图

2.猫腻轮播图

3.最后一张设置猫腻图

4.三点轮播图

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

轮播图动画

1.普通轮播图

2.猫腻轮播图

3.最后一张设置猫腻图

4.三点轮播图

热门文章

最新文章

相关电子书