Jquery实现简单的图片轮播 (通过点击数字切换)

梦里梦外; 2023-07-10 08:28 68阅读 0赞

## ***最终实现效果图***![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyMzEzNg_size_16_color_FFFFFF_t_70]   ***代码块***   html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播</title>
        <link rel="stylesheet" href="css/index.css">
        <script src="jq/jquery-1.7.2.js" type="text/javascript"></script>
        <script src="jq/index.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="box" id="box">
        <div class="big-img" id="big-img">
            <ul>
                <li><a href=""><img src="image/1.jpg"></a></li>
                <li><a href=""><img src="image/2.jpg"></a></li>
                <li><a href=""><img src="image/3.jpg"></a></li>
                <li><a href=""><img src="image/4.jpg"></a></li>
            </ul>
        </div>
        <div class="square" id="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
    </div>
    </body>
    </html>

## **css** ##

*{margin: 0;padding: 0}
    ul{list-style: none}
    
    img {
        vertical-align: top
    }
    .box{
        position: absolute;
        width: 960px;
        height: 600px;
        margin-left: 200px;
        margin-top: 100px;
        padding: 5px;
        border: 1px solid #ccc;
    }
    .big-img{
        width: 960px;
        height: 600px;
        overflow: hidden;
        position: relative;
    }
    .big-img ul{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .big-img li{
        float: left;
    }
    
    .square{
        position: absolute;
        right: 30px;
        bottom: 20px;
    }
    .square span{
        display: inline-block;
        width: 26px;
        height: 26px;
        margin: 5px;
        background-color: #fff;
        text-align: center;
        line-height: 26px;
        cursor: pointer;
    }
    .square span.current{
        background-color: orangered;
        color: #fff;
    }

## **js** ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyMzEzNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200301151232850.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyMzEzNg==,size_16,color_FFFFFF,t_70