学习笔记——轮播图的实现

谁借莪１个温暖的怀抱￠ 2022-11-21 11:41 184阅读 0赞

--------------------

> 轮播图是前端开发的一个重要的技术。以下使实现轮播图的三种方法：

### **1.使用纯CSS实现：** ###

> 使用CSS的动画效果实现，能实现无缝轮播图，但无法实现轮播图的点击切换。

HTML：

CSS：

.w {
    	width: 1200px;
    	margin: 0 auto;
    }
    
    .banner {
    	margin: 100px auto;
    	position: relative;
    	overflow: hidden;
    }
    
    ul.banner-slider {
    	transition: all 1s ease-out;
    	width: 100%;
    	height: 100%;
    	font-size: 0;
    	white-space: nowrap;
    	transform: translateX(-100%);
    }
    
    ul.banner-slider>li {
    	display: inline-block;
    	width: 100%;
    	height: 100%;
    }
    
    ul.banner-slider>li>a {
    	display: block;
    	height: 100%;
    }
    
    ul.banner-slider>li>a>img {
    	width: 100%;
    	height: 100%;
    }
    
    /* 自定义动画 */
    @keyframes banner {
    	/* 开始 */
    	0% { margin-left: -100%; }
    	/* 等5s看第一张图片 */
    	22.7%{ margin-left: -100%; }
    	/* 0.5s切换到第二张图片 */
    	25%{ margin-left: -200%; }
    	/* 等5s看第二张图片 */
    	48%{ margin-left: -200%; }
    	/* 0.5s切换到第三张图片 */
    	50%{ margin-left: -300%; }
    	/* 等5s看第三张图片 */
    	73%{ margin-left: -300%; }
    	/* 0.5s切换到第四张图片 */
    	75%{ margin-left: -400%; }
    	/* 等5s看第四张图片 */
    	98% { margin-left: -400%; }
    	/* 0.5s切换到第一张图片 */
    	100% { margin-left: -500%; }
    	/* 百分比走的是父元素的宽度 */
    }
    
    ul {
        background-color: pink;
        width: 100%;
        font-size: 0;
        margin-left: -100%;
        /* 让盒子内部的行级元素强制不准换行 */
        white-space: nowrap;
            /* 自定义动画的名字 */
        animation-name: banner;
        /* 自定义动画持续时间 */
        animation-duration: 22s;
        /* 自定义动画播放次数 */
        animation-iteration-count: infinite;
    }

运行结果：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

### 2.使用CSS+JS实现： ###

**HTML：**

**CSS：**

.banner {
    	margin: 100px auto;
    	position: relative;
    	overflow: hidden;
    }
    
    ul.banner-slider {
    	transition: all 1s ease-out;
    	width: 100%;
    	height: 100%;
    	font-size: 0;
    	white-space: nowrap;
    	transform: translateX(-100%);
    }
    
    ul.banner-slider>li {
    	display: inline-block;
    	width: 100%;
    	height: 100%;
    }
    
    ul.banner-slider>li>a {
    	display: block;
    	height: 100%;
    }
    
    ul.banner-slider>li>a>img {
    	width: 100%;
    	height: 100%;
    }
    
    /* 指示器 */
    ul.banner-indicator {
    	position: absolute;
    	left: 50%;
    	bottom: 30px;
    	/* 变形----平移技术 */
    	transform: translateX(-50%);
    }
    
    ul.banner-indicator>li {
    	float: left;
    	width: 50px;
    	height: 20px;
    	background-color: rgb(0,0,0,0.5);
    	border-radius: 4px;
    	overflow: hidden;
    	margin: 0 10px;
    }
    
    ul.banner-indicator>li::before {
    	content: "";
    	width: 0;
    	height: 100%;
    	float: right;
    	transition: all 1s ease-out;
    	background-color: orange;	
    }
    
    ul.banner-indicator>li.active:before {
    	width: 100%;
    	float: left;
    }
    
    /* 耳朵图 */
    span.banner-prev,span.banner-next {
    	width: 50px;
    	height: 100px;
    	background-color: rgba(0,0,0,0.3);
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	cursor: pointer;
    }
    
    span.banner-prev {
    	left: 5%;
    }
    
    span.banner-next {
    	right: 5%;
    }
    
    span.banner-prev:hover,span.banner-next:hover {
    	background-color: rgba(0,0,0,0.6);
    }

**JS：**

运行结果：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1][]

## ##

### 3.使用swiper插件： ###

> 现在，一些大牛程序员写了一些很好用的第三方插件，swiper插件使用简单，只需要配置一些需要，就能实现轮播图的很多功能。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221120/8d333b01c0f64dccb8d174da6d60d8f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201101150642555.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2,size_16,color_FFFFFF,t_70