简单轮播图

来源：互联网发布：查开放房记录软件编辑：程序博客网时间：2024/06/05 00:26
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>
阅读全文
0 0