温故已学知识点1

最新推荐文章于 2024-04-07 19:18:49 发布

Libby_lv

最新推荐文章于 2024-04-07 19:18:49 发布

阅读量404

点赞数

分类专栏： jquery 文章标签：图片轮播效果

本文链接：https://blog.csdn.net/Ludmila/article/details/52633981

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这里引用了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" οnmοuseοver="btnB()" οnmοuseοut="btnN()">
        <p class="btn" οnclick="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" οnmοuseοver="roll(0)"><a href="javascript:void(0)">1</a></li>
            <li οnmοuseοver="roll(1)"><a href="javascript:void(0)">2</a></li>
            <li οnmοuseοver="roll(2)"><a href="javascript:void(0)">3</a></li>
        </ul>
        <p class="btn btnR" id="right" οnclick="btnR()"><a href="javascript:void(0)">></a></p>
    </div>
</body>
</html>