简单轮播图

最新推荐文章于 2022-09-08 00:27:36 发布

脚步6978

最新推荐文章于 2022-09-08 00:27:36 发布

阅读量291

点赞数

分类专栏： JavaScript

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

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .banner_min_box{
        position: relative;
        height: 360px;
        width: 1200px;
    overflow:hidden;
    }
    .banner_min_box img{
        position: absolute;
    }
    .show{
        display: block;
    }
</style>
</head>
<body>
<div class="banner_min_box">
        <img class="" src="images/banner_01.jpg" width="1200" height="360" />
        <img class="" src="images/banner_02.jpg" width="1200" height="360" />
        <img class="" src="images/banner_03.jpg" width="1200" height="360" />
 </div>
</body>
</html>
<script src="jquery.1.12.min.js"></script>
<script type="text/javascript">
        //隐藏所有banner
        $('.banner_min_box').children().addClass('hide');
        //获取第一张banner节点
        firstBanner = $('.banner_min_box').children().eq(0);
        //显示第一张banner
        firstBanner.removeClass('hide').addClass('show');
        //初始化轮播
        startLunbo = setInterval(initBanner,2000);
        //setInterval(轮播内容，时间) 定时器
        function initBanner(){
            var nowBanner = $('.banner_min_box').find('.show');
            //切换图片
            show(nowBanner);
            hide(nowBanner);
        }
        function show(nowBanner){
            var next = nowBanner.next();
            if(next.length == 0){
                console.log(next.length);
                next = firstBanner;
            }
            next.removeClass('hide').addClass('show').css({left: '1200px'});
            next.stop().animate({left: '0px'}, 1000);
        }
        function hide(nowBanner){
            nowBanner.stop().animate({left: '-1200px'}, 1000, function(){
                nowBanner.removeClass('show').addClass('hide');
            });
        }
</script>