实现图片轮播功能，js+css，超级简练通俗易懂

最新推荐文章于 2023-04-13 16:25:26 发布

小瑜的csdn

最新推荐文章于 2023-04-13 16:25:26 发布

阅读量386

点赞数 1

分类专栏：前端文章标签： html js css image

本文链接：https://blog.csdn.net/XYLHxylh/article/details/82430840

版权

前端专栏收录该内容

40 篇文章 2 订阅

订阅专栏


<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="jquery.js"></script>
        <script src="jquery.js"></script>
        <style>
            .imagearea{
                padding: 0px;
                margin: 0px auto;
                width: 750px;
                height: 450px;
                position: relative;
            }
            img{
                position: absolute;
                top: 0px;
                left: 0px;

            }
            .leftmenu{
                width:20px;
                height:50px;
                background-color: gray;
                opacity: 0.7;
                position: absolute;
                left: 0px;
                top:200px;
                text-align: center;
                line-height: 45px;
                font-weight:bold

            }
            .rightmenu{
                width:20px;
                height:50px;
                background-color: gray;
                opacity: 0.7;
                position: absolute;
                right:51px;
                top:200px;
                text-align: center;
                line-height: 45px;
                font-weight:bold

            }
            .imgShow{
                display: block
            }
            .hiddenShow{
                display: none
            }
            .circlearea{
                position: absolute;
                left: 60px;
                bottom: 50px
      
            }

        </style>
    </head>
    <body>
<!--       总盒子-->
        <div class="imagearea">
<!--图片区域-->
            <img src="19.jpg" alt="" width="700px" height="450px" class="hiddenShow" display="none"/>
            <img src="54c0ad93e3de5.jpg" alt="" width="700px" height="450px" class="hiddenShow"  display="none"/>
            <img src="4_1.jpg" alt="" width="700px" height="450px" class="imgShow"/>
<!--图片区域-->
<!--左右按钮-->
            <div class="leftmenu" ><</div>
            <div class="rightmenu">></div>
<!--左右按钮-->
<!--圆圈区域-->
            <div class="circlearea">
                <div  class="circle" id="c1" style="float:left">○&nbsp;&nbsp;&nbsp;</div>
                <div  class="circle" id="c2"  style="float:left">○&nbsp;&nbsp;&nbsp;</div>
                <div  class="circle" id="c3" style="float:left">○&nbsp;&nbsp;&nbsp;</div>
            </div>
<!--圆圈区域-->

            <div>
<!--总盒子-->
<!--js代码-->
                <script>
                //当点击按钮时，获得目前拥有imgshow这个类的图片，也就是获得正在显示的图片，将这个图片的显示功能去掉，
                //然后让下一个图片增加这个class，也就是有显示功能，index（）这个方法是获得括号内元素相对于父元素的索引，
                //如果这个图片是第三张，也就是 这个索引是2，讲nowpic这个变量重新赋值为-1，这样再次轮回就可以从第0的索引
                //开始，左右按钮的功能与方法相似
                    $(".rightmenu").click(function () {
                        var $nowpic = $("img").index($(".imgShow"));
                        $("img").eq($nowpic).removeClass("imgShow").addClass("hiddenShow")
                        if ($nowpic == 2) {
                            $nowpic = -1
                        }
                        $("img").eq($nowpic + 1).removeClass("hiddenShow").addClass("imgShow")


                    })
                    $(".leftmenu").click(function () {
                        console.log("s")
                        var $nowpic = $("img").index($(".imgShow"));
                        $("img").eq($nowpic).removeClass("imgShow").addClass("hiddenShow")
                        if ($nowpic == 0) {
                            $nowpic = 3
                        }
                        $("img").eq($nowpic - 1).removeClass("hiddenShow").addClass("imgShow")


                    })
                    //当鼠标进入圆圈内，获得这个圆圈的索引，然后让所有圆圈都变成空心，唯独将这个目标圆圈变成实心
                    //同时同步图片的索引
                    $(".circle").mouseenter(function(){
                        var $nowpic = $("img").index($(".imgShow"));
                        $(".circle").html("○&nbsp;&nbsp;&nbsp;")
                        $(this).html("●&nbsp;&nbsp;&nbsp;")
                        console.log($(this).index())
                        $("img").eq($nowpic).removeClass("imgShow").addClass("hiddenShow")
                        $("img").eq($(this).index()).addClas.removeClass("hiddenShow")
                        
                    })
                  

                </script>
<!--js代码-->
                </body>
                </html>

小瑜的csdn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现图片轮播功能，js+css，超级简练通俗易懂

&lt;html&gt; &lt;head&gt; &lt;title&gt;TODO supply a title&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, i
复制链接

扫一扫

专栏目录