自制轮播图

最新推荐文章于 2022-02-14 22:43:04 发布

xuanwuziyou

最新推荐文章于 2022-02-14 22:43:04 发布

阅读量448

点赞数

分类专栏： Web前端技术

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/76257408

版权

Web前端技术专栏收录该内容

115 篇文章 2 订阅

订阅专栏

效果：

轮播图的关键：

a.外层容器宽度设为一张图片的宽度，子元素的宽度是n张图片的总宽度（放置这n张图片用），此时子元素宽度大于了外层容器宽度，设置外层容器：overflow:hidden，可每次只显示一张图片。

b.切换到下一张图片时的动画怎么做？从前的话就用jquery的animate函数，现在有了css3，使用transition动画就可以了，transition:left 0.8s ease ，根据用户的操作设置上面所说的盛放n张图片的子元素的left（当前必须给它设置position，才能使left生效），left渐变就是想要的动画了。

c.向左，向右，底部的圆点这些控制按钮，可以新做一个层出来，定位在外层容器上。

d.过程中发现，如果设置切换一次时间为0.8s，若用户紧接着再次点击切换按钮的话，由于left的值还没动作到位，图片就是卡住的状态（显示了两张图片，但都没显示完全，就停住了），这肯定是不行的。解决思路：切换动作执行一次后要等待0.8s，让图片动作做完。图片动作过程中，把控制按钮一层的opacity设为0.5，来个半透明，提示用户此时不可操作。

嗯。其实还可以封装得更好，先这样。上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <style>
        *{padding:0 0;margin:0 0;}
        .carousel-wrap{margin:100px auto 0 auto;border:1px solid #ccc}
        .carousel-wrap, .carousel{width:500px;height:300px;}
        .carousel{
            overflow:hidden; /*关键*/
        }
        .carousel ul{width:2000px;margin:0 0;padding:0 0;list-style:none;position:relative;left:0;
            transition:left 0.8s ease; /*关键*/
        }
        .carousel li{display:inline-block;}
        .carousel img{width:500px;height:300px}
        .carousel-wrap{position:relative;background:lightgray;}
        .control{position:absolute;width:500px;height:300px;left:0;top:0;}
        #previous,#next{border-radius:25px;color: white;font-size: 30px;box-sizing: border-box;width: 50px;height: 50px;line-height: 28px;font-style: normal;padding: 10px 10px;background-color: rgba(0,0,0,0.3);text-align: center;cursor:pointer}
        #previous{position:absolute;left:32px;top:150px}
        #next{position:absolute;right:32px;top:150px}
        .control ul{width: 100%;margin: auto;position: absolute; bottom: 20px;text-align: center;padding: 0 0;}
        .control li{display:inline-block;width:20px;height:20px;border-radius:10px;background-color:rgba(255,255,255,0.8);margin-right:18px;cursor:pointer}
        .control li:last-child{margin-right:0}
        .control li.on{background-color:rgba(255,255,255,0.3)}
        #previous,#next{-webkit-user-select:none;}
        #previous{display:none;}
        .control.wait{opacity:0.5}
    </style>
</head>
<body>
<div class="carousel-wrap">
    <div class="carousel">
        <ul>
            <li><img src="image/12.jpg" alt="A"></li><li><img src="image/13.jpg" alt="B"></li><li><img src="image/14.jpg" alt="C"></li><li><img src="image/15.jpg" alt="D"></li>
        </ul>
    </div>
    <div class="control">
        <span id="previous"><</span>
        <span id="next">></span>
        <ul><li class="on"></li><li></li><li></li><li></li></ul>
    </div>
</div>
<script>
    var carousel;
    $(function(){
        carousel=new Carousel(4,500,800);
        $("#previous").click(function(){
            carousel.goPrevious();
        });
        $("#next").click(function(){
            carousel.goNext();
        });
        $(".control li").click(function(){
            carousel.goLocate($(this).index());
        });
    });
    //自动播放 carousel.autoRun();


    //param:count-图片数量
    //param:width-一张轮播图的宽度
    //param:milisecond-一次滑动的毫秒数
    function Carousel(count,width,milisecond){
        var current=0;
        var canRun=true;
        var goPrevious=function (num){
            if(!canRun){return;}
            canRun=false;
            $(".control").addClass("wait");
            num=num || 1;
            if(current>0){
                var left=(getLeft()+num*width)+"px";
                $(".carousel ul").css("left",left);
                current=current-num;
            }
            setControl();
            setTimeout(function(){canRun=true;$(".control").removeClass("wait");},milisecond);
        };
        var goNext=function (num){
            if(!canRun){return;}
            canRun=false;
            $(".control").addClass("wait");
            num=num || 1;
            if(current<(count-1)){
                var left=(getLeft()-num*width)+"px";
                $(".carousel ul").css("left",left);
                current=current+num;
            }
            setControl();
            setTimeout(function(){canRun=true;$(".control").removeClass("wait");},milisecond);
        };
        var goLocate=function (index){
            if(index>current){        //展示右侧
                var num=index-current;
                goNext(num);
            }else if(index<current){  //展示左侧
                var num=current-index;
                goPrevious(num);
            }
        };
        var getLeft=function (){
            return parseInt($(".carousel ul").css("left").replace("px",""));
        };
        var setControl=function(){
            $(".control li").removeClass("on").eq(current).addClass("on");
            current === 0 ? $("#previous").hide() : $("#previous").show();
            current ===(count-1) ? $("#next").hide():$("#next").show();
        };
        var autoRun=function(){
            setInterval(function(){
                var index=(current+1) % 4;
                goLocate(index);
            },milisecond);
        };
        return{
            goPrevious:goPrevious,
            goNext:goNext,
            goLocate:goLocate,
            autoRun:autoRun //自动播放
        }
    }

</script>

</body>
</html>