HTML+CSS+JS实现 ❤️图片轮播幻灯片❤️

叁歲伎倆 2022-09-10 11:22 152阅读 0赞

> ##   效果演示：  **文末获取源码** ##
> 
> ![20210907203132617.gif][]

> ## 代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### CSS样式： ###

@font-face {
        font-weight: normal;
        font-style: normal;
    }
    
    .csslider1 {
        display: inline-block;
        position: relative;
        max-width: 833px;
        width: 100%;
        margin-top: 10px;
    }
    
    .csslider1>.cs_anchor {
        display: none;
    }
    
    .csslider1>ul {
        position: relative;
        z-index: 1;
        font-size: 0;
        line-height: 0;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
    }
    
    .csslider1>ul>li.img img {
        width: 100%;
    }
    
    .csslider1>ul>li.img {
        font-size: 0pt;
        -khtml-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
    
    .csslider1>ul>li {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-size: 15px;
        font-size: initial;
        line-height: normal;
        white-space: normal;
        vertical-align: top;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

### HTML代码 : ###

<!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>纯CSS3实现的图片切换幻灯片代码</title>
    </head>
    
    <body>
        <center>
            <section id="rt-showcase-surround">
                <div id="rt-showcase" class="slider-container rt-overlay-dark">
                    <div class="rt-container slider-container">
                        <div class="rt-grid-12 rt-alpha rt-omega">
    
                            <link rel="stylesheet" href="css/style.css">
                            
                            
    
                            <div class="csslider1 autoplay">
                                <input name="cs_anchor1" autocomplete="off" id="cs_slide1_0" type="radio" class="cs_anchor slide">
                                <input name="cs_anchor1" autocomplete="off" id="cs_slide1_1" type="radio" class="cs_anchor slide">
                                <input name="cs_anchor1" autocomplete="off" id="cs_slide1_2" type="radio" class="cs_anchor slide">
                                <input name="cs_anchor1" autocomplete="off" id="cs_play1" type="radio" class="cs_anchor" checked>
                                <input name="cs_anchor1" autocomplete="off" id="cs_pause1" type="radio" class="cs_anchor">
                                <ul>
                                    <div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
                                        <img src="images/1.jpg" style="width: 100%;">
                                    </div>
                                    <li class="num0 img">
                                        <img src="images/1.jpg" alt="Clouds" title="Clouds" />
                                    </li>
                                    <li class="num1 img">
                                        <img src="images/2.jpg" alt="Typewriter" title="Typewriter" />
                                    </li>
                                    <li class="num2 img">
                                        <img src="images/3.jpg" alt="Bicycle" title="Bicycle" />
                                    </li>
    
                                </ul>
                                <div class="cs_description">
                                    <label class="num0">
    								<span class="cs_title"><span class="cs_wrapper">Clouds</span></span>
    								
    							</label>
                                    <label class="num1">
    								<span class="cs_title"><span class="cs_wrapper">Typewriter</span></span>
    								
    							</label>
                                    <label class="num2">
    								<span class="cs_title"><span class="cs_wrapper">Bicycle</span></span>
    								
    							</label>
                                </div>
    
                                <div class="cs_arrowprev">
                                    <label class="num0" for="cs_slide1_0"></label>
                                    <label class="num1" for="cs_slide1_1"></label>
                                    <label class="num2" for="cs_slide1_2"></label>
                                </div>
                                <div class="cs_arrownext">
                                    <label class="num0" for="cs_slide1_0"></label>
                                    <label class="num1" for="cs_slide1_1"></label>
                                    <label class="num2" for="cs_slide1_2"></label>
                                </div>
    
                                <div class="cs_bullets">
                                    <label class="num0" for="cs_slide1_0">
    								<span class="cs_point"></span>
    								<span class="cs_thumb"><img src="images/small/1.jpg" alt="Clouds" title="Clouds" /></span>
    							</label>
                                    <label class="num1" for="cs_slide1_1">
    								<span class="cs_point"></span>
    								<span class="cs_thumb"><img src="images/small/2.jpg" alt="Typewriter" title="Typewriter" /></span>
    							</label>
                                    <label class="num2" for="cs_slide1_2">
    								<span class="cs_point"></span>
    								<span class="cs_thumb"><img src="images/small/3.jpg" alt="Bicycle" title="Bicycle" /></span>
    							</label>
                                </div>
    
                            </div>
    
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </section>
            
        </center>
    
    </body>
    
    </html>

上面的图片需要引入

> ## 源码获取 ##
> 
> 查看博主主页或点击**下方微信获取**~！
> 
> 精彩推荐更新中：
> 
> ### [HTML5大作业实战100套][HTML5_100] ###
> 
> 打卡 文章 更新** 42  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、
> 
> ###  ###

[20210907203132617.gif]: /images/20220829/d037726f198f40378920068cab613c30.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/ffbf3ce6f74440cd84d4e28dc3461b54.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html