温故已学知识点1

来源：互联网发布：淘宝培训编辑：程序博客网时间：2024/04/30 18:03

这里引用了jQuery类库，所以不要忘了先将jQuery引入，下面三张图对应为banner1，banner2，banner3

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>banner轮播</title>    <script type="text/javascript" src="js/jquery.js"></script>    <script type="text/javascript">        var banners = ["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"];        var index = 0;        //banner自动播放        function autoplay(){            index ++;            if(index >= banners.length){                index = 0;            }            $("#img").attr("src",banners[index]);            var pot = $(".roll-pot li").removeClass("roll-pot-bg");            $(pot[index]).addClass("roll-pot-bg");        }        var play = setInterval(autoplay,1000);        //鼠标滑过出现左右按钮        function btnB(){            clearInterval(play);            $(".btn").css("display","block");        }        //鼠标滑过隐藏左右按钮        function btnN(){            play = setInterval(autoplay,1000);            $(".btn").css("display","none");        }        //点击左按钮        function btnL(){            index == 0 ? index = banners.length-1 : index --;//三目运算符            $("#img").attr("src",banners[index]);            var pot = $(".roll-pot li").removeClass("roll-pot-bg");            $(pot[index]).addClass("roll-pot-bg");        }        //点击又按钮        function btnR(){            index == banners.length-1 ? index = 0 : index ++;            $("#img").attr("src",banners[index]);            var pot = $(".roll-pot li").removeClass("roll-pot-bg");            $(pot[index]).addClass("roll-pot-bg");        }        //鼠标滑过小圆点        function roll(a){            index = a;            var pot = $(".roll-pot li").removeClass("roll-pot-bg");            $(pot[a]).addClass("roll-pot-bg");            $("#img").attr("src",banners[a]);        }    </script>    <style type="text/css">        * { list-style: none; text-decoration: none;}        .banner { position: relative;}        .roll-pot { width:90px; position: absolute; top:80%; left:50%; margin-left:-45px;}        .roll-pot li { float:left; width:20px; height:20px; text-align: center; line-height:20px; border-radius:20px; background:rgba(0,0,0,.7); margin-left:8px;}        .roll-pot li a { color:#fff;}        .btn { display:none; position:absolute; width:30px; height:80px; left: 10%; top:50%; margin-top:-40px; background:rgba(0,0,0,.5); line-height: 80px; text-align: center; font-size: 36px;}        .btn a { color:#fff;}        .btnR{ left: 90%!important;}        .roll-pot-bg { background:rgba(250,0,0,.8)!important;}    </style></head><body>    <div class="banner" onmouseover="btnB()" onmouseout="btnN()">        <p class="btn" onclick="btnL()"><a href="javascript:void(0)"><</a></p>        <img src="img/banner1.jpg" id="img" alt="banner1">        <ul class="roll-pot" >            <li class="roll-pot-bg" onmouseover="roll(0)"><a href="javascript:void(0)">1</a></li>            <li onmouseover="roll(1)"><a href="javascript:void(0)">2</a></li>            <li onmouseover="roll(2)"><a href="javascript:void(0)">3</a></li>        </ul>        <p class="btn btnR" id="right" onclick="btnR()"><a href="javascript:void(0)">></a></p>    </div></body></html>

0 0