jQuery实现一个简单的轮播图

柔情只为你懂 2022-01-31 06:57 297阅读 0赞

### 一.轮播图内容组成 ###

包括：4张图片，图片标号，向左翻页，向右翻页的几个部分，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70][]

### 二.实现功能 ###

1.加载页面后，4张图片默认从第一张图片开始轮播，索引值为1。

2.当把鼠标over到图片上时，图片定住不动。

3.点击图片索引值可以切换图片，鼠标离开图片后，图片从切换后的图片开始轮播.

4.点击【向左翻页】/【向右翻页】可以切换图片，鼠标离开图片后，图片从切换后的图片开始轮播。

### 三.HTML代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="outer">
            <ul class="img">
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
            </ul>
            <ul class="num">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
            <div class="btn_left button"> < </div>
            <div class="btn_right button"> > </div>
    
        </div>
    </body>
    </html>

### 四.CSS代码 ###

1.图片的长宽与其父级div一致并填满div

*{
                margin:0px;
                padding:0px;
            }
            
            .outer{
                position:relative;
                width:500px;
                height:300px;
                border:dashed cadetblue 2px;
                margin:0 auto;
            }
            ul li{
                list-style:none;
            }
            img{
                width:500px;
                height:300px;
                position:absolute;
                top:0px;
                left:0px;
            }
            .num{
                position:absolute;
                bottom:10px;
                font-size:0px;
                width:100%;
                text-align:center;
            }
            .num li{
                width:20px;
                height:20px;
                background-color:gray;
                border-radius:60%;
                text-align:center;
                line-height:20px;
                display:inline-block;
                font-size:10px;
                margin:3px;
                cursor:pointer;
    
    
            }
            .button{
                width:20px;
                height:60px;
                line-height:60px;
                text-align:center;
                background-color:gray;
                opacity:0.6;
                position:absolute;
                top:50%;
                margin-top:-30px;
                font-size:20px;
                font-weight:bolder;
                display:none;
                cursor:pointer;
            }
            .btn_right{
                position:absolute;
                right:0px;
            }
            .outer:hover .button{
                display:block;
            }
            .outer .num li.current{
                background-color:red;
            }

### 五.js代码 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70]: /images/20220131/f5128f8830584a5a933d100703e9840b.png