简单写小轮播图

简单写小轮拨图

第一步  分析你想写的轮拨图有几张图片

第二步  把每张图片都加一个CLass=“img2”     //  你也可以都设置成img   名称不重要

第三步 先写一个刷新页面后立即执行的方法

第四步 先将所有img都隐藏   写一个公用的css

 .img2 {
        display:none;
        }

 

第五步，开始做逻辑分析

｛

1.先展现第一张图片 将第一张图片的css属性display:none（图片隐藏）;改为display：block（图片展现）

2.添加一个计时器   设置为多少秒后换图

3.获取到所有的img  在写个方法判断

些判断   如果第一张图片是否显示    显示 则显示的图片逐渐隐藏

再判断   判断后面图片的张数大于0  则下一张逐渐显示

如果后面图片的张数小于0   则从第一张开始显示

  ｝

 

<script>
    //1.刷新页面后此方法运行
    $(function () {
       $(".img2:eq(0)").css("display", "block");
        setInterval(function (){
            //业务逻辑
            //获取到所有的IMG2  判断那个img2的css display为block
            $(".img2").each(
                function () {
                    if ($(this).css("display") == "block") {
                        //返回他的下一个同级级元素
                        //图片逐渐淡出
                        $(this).fadeOut(1000);
                        if ($(this).next().length > 0) {
                            //下一张图片逐渐淡入
                            $(this).next().fadeIn(2000);
                        }
                        else {
                            //第一张图逐渐淡入
                            $(".img2:eq(0)").fadeIn(2000);
                        }
                        return false;
                    }
                }
            )
        },3000)

        
    })
</script>

 

标签：轮播,第一张,block,简单,img2,display,css,图片
来源： https://www.cnblogs.com/yutang-wangweisong/p/11871806.html