Jquery实现左右箭头切换轮播的效果

深藏阁楼爱情的钟 2023-07-10 08:43 58阅读 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"></script>
        <script src="jq/index.js"></script>
    </head>
    <body>
    <div class="box" id="box">
        <ul class="big_img" id="big_img">
            <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 class="btn btn_left"><</div>
        <div class="btn btn_right">></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;
    }
    .big_img{
        width: 960px;
        height: 600px;
        overflow: hidden;
        position: relative;
    }
    .big_img ul{
        position: absolute;
        top: 0;
        left: 0;
    }
    .big_img li{
        float: left;
    }
    .btn{
        display: none;
        width: 50px;
        height: 60px;
        background: rgba(0,0,0,0.30);
        line-height: 60px;
        text-align: center;
        color: lightgray;
        font-size: 50px;
        cursor: pointer;
    }
    .btn_left{
        position: absolute;
        left: 0px;
        top: 50%;
        margin-top: -30px;
    }
    .btn_right{
        position: absolute;
        right: 0px;
        top: 50%;
        margin-top: -30px;
    }

## **js** ##

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