jQuery实现轮播广告

来源：互联网发布：淘宝广场舞服装女裙子编辑：程序博客网时间：2024/06/07 02:09
<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>轮播广告</title>    <style>        #slider {            width: 568px;            height: 320px;            background: #ddd;            position: absolute;            left: 0;            top: 0;            right: 0;            bottom: 0;            margin: auto;            overflow: hidden;        }        #slider .slider-img {            width: 100%;            height: 100%;            position: absolute;            left: 0;            top: 0;            z-index:-1;        }        #slider .slider-img.active{            z-index:auto;        }        #slider .slider-nav-list {            position: absolute;            bottom: 5%;            left: 50%;            transform: translateX(-50%);            -webkit-transform: translateX(-50%);            list-style: none;            margin: 0;            padding: 0;        }        #slider .slider-nav-list .nav-item {            width: 8px;            height: 8px;            border-radius: 50%;            background: #fff;            display: inline-block;            margin: 0 8px;            cursor: pointer;            transition: all 0.5s linear;        }        #slider .slider-nav-list .nav-item.active {            margin-bottom: -1px;            width: 10px;            height: 10px;            background: #FF9800;        }    </style></head><body>    <div id="slider">        <img class="slider-img active" src="images/slider01.jpg" alt="">        <img class="slider-img" src="images/slider02.jpg" alt="">        <img class="slider-img" src="images/slider03.jpg" alt="">        <ul class="slider-nav-list">            <li class="nav-item active"></li>            <li class="nav-item"></li>            <li class="nav-item"></li>        </ul>    </div>    <script src="js/jquery-3.2.0.js"></script>    <script>        function carousel(){            var interval = 2000;    //间隔多久轮换一次            var duration = 500;     //轮换动画的持续时间            var cur = 0;    //当前图片的下标            var next =1;    //下一个图片的下标            var li_list = $(".nav-item");            var img_list = $(".slider-img");            setInterval(function(){                sliderImg();            },interval)            function sliderImg(){                //轮换导航                li_list.eq(next).addClass("active").siblings().removeClass("active");                //轮换图片                img_list.eq(cur).animate({                    left:"-100%"                },duration,function(){                    $(this).removeClass("active")                });                img_list.eq(next).addClass("active").css("left","100%").animate({left:"0"},duration);                cur = next;                next++;                if(next >= img_list.length){                    next=0;                };            };        };        carousel();    </script></body></html>
阅读全文
0 0