简单轮播图

最新推荐文章于 2022-05-07 19:57:53 发布

脚步6978

最新推荐文章于 2022-05-07 19:57:53 发布

阅读量297

点赞数

分类专栏： JavaScript 文章标签：轮播图

本文链接：https://blog.csdn.net/m0_38027358/article/details/75734517

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

创建视图play.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SHOW</title>
    <style>
        .banner_min_box{
            position: relative;
            height: 120px;
        }    
        .banner_min_box img{
            position: absolute;
        }
        .show{
            display: block;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<center>
    <div class="banner_min_box">
        <img src="banner_01.jpg" class="hide" width="1200" height="110" />
        <img src="banner_02.jpg" class="hide" width="1200" height="110" />
        <img src="banner_03.jpg" class="hide" width="1200" height="110" />
    </div>
</center> 
</body>
</html>
<script src="./jquery.js"></script>
<script>
    $(function(){
        //轮播找第一张图片
        one=$(".banner_min_box").children('img').eq(0);
        //显示第一张图片
        one.removeClass('hide').addClass('show');
        //初始化定时器
        setInterval(changeBanner,2000);//函数名，2秒
        function changeBanner(){
            //定义显示当前图片
            var nowBanner=$(".banner_min_box").children('.show');
            //调用显示方法
            show(nowBanner);
            //之后隐藏当前，显示next
            hide(nowBanner);
        }
        //显示方法
        function show(nowBanner){
            //找当前的下一个
            var next=nowBanner.next();
            //如果下一个不存在，则循环第一个
            if(next.length==0){
                next=one;
            }
            //否则显示下一个,下一个在右侧1200px处，
            next.css({left:'1200px'});//动画
            //以动画1秒 进入当前界面
            next.removeClass('hide').addClass('show').animate({left:'0px'},1000);
        }
        //隐藏方法
        function hide(nowBanner){
            //隐藏显示的图片,动画1秒向左侧离去
            nowBanner.animate({left:'-1200px'},1000,function(){//动画
                nowBanner.removeClass('show').addClass('hide');
            });
        }
    })
</script>