简单JS实现图片轮播效果（一）

不念不忘少年蓝@ 2023-01-13 05:50 180阅读 0赞

# 实现效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70]

*  左右按钮可点击左右移动显示图片进行无缝滚动
 *  下面的小圆圈点击可跳到对应的图片索引
 *  不进行上述操作时，图片自动轮播

## html源码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Carousel chart</title>
        <link rel="stylesheet" href="./style.css">
        <script src="./index.js"></script>
        <script src="./animate.js"></script>
    </head>
    
    <body>
        <div class="carousel_box" id="carousel-box">
            <a href="javascript:;" class="arrow-l">
                < </a>
                    <a href="javascript:;" class="arrow-r"> > </a>
                    <ul class="move">
                        <li><img src="./images/xuezhong_1.jpg" alt=""></li>
                        <li><img src="./images/guimizhizhu_2.jpg" alt=""></li>
                        <li><img src="./images/jianlai_3.jpg" alt=""></li>
                        <li><img src="./images/yichang_4.jpg" alt=""></li>
                    </ul>
                    <ol class="circle">
                    </ol>
        </div>
    </body>
    
    </html>

*  一个大的div盒子里面，两个左右悬浮于中间的按钮，四张图片，一行相对于下面的小圆圈

## CSS源码 ##

*{ 
        padding: 0;
        margin: 0;
    }
    
    li { 
        list-style-type: none;
    }
    
    #carousel-box { 
        position: relative;
        width: 700px;
        height: 300px;
        background-color: pink;
        margin: 100px auto;
        overflow: hidden;
    }
    
    .arrow-l,.arrow-r { 
        display: none;
        position:absolute;
        width: 24px;
        height: 40px;
        top: 50%;
        margin-top: -20px;
        background: rgba(0, 0, 0, 0.3);
        text-align:center;
        line-height: 40px;
        color: #fff;
        font-size: 18px;
        font-family: 'icomoon';
        z-index: 3;
    }
    .arrow-r { 
        right: 0;
    }
    
    #carousel-box img{ 
        width: 700px;
        height: 300px;
    }
    
    #carousel-box ul { 
        position:absolute;
        width: 1000%;
    }
    
    #carousel-box ul li { 
        float: left;
    }
    
    .circle { 
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    
    .circle li { 
        float: left;
        width: 8px;
        height: 8px;
        margin: 0 5px;
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        cursor: pointer;
        z-index: 9999;
    }
    
    .current { 
        background-color: pink;
    }

## JS源码 ##

animate.js：在水平平面实现左右移动的函数

index.js

心得：在js实现功能中，如何根据图片数量生成小圆圈并能无缝滚动需要重点注意。  
未解决的bug：多次快速点击小圆圈跳转后，可能会导致小圈圈与图片索引位置错乱，同样点击左右按钮也有可能出现类似问题。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/5ab773e14b7740de9ac1058650bd2d4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70]: /images/20221022/d8cfaefd42374a9199661b688050be50.png