轮播图学习总结之一(有源码)

最新推荐文章于 2024-04-27 09:39:14 发布

Sys_菜菜

最新推荐文章于 2024-04-27 09:39:14 发布

阅读量1.5k

点赞数 1

分类专栏：学习文章标签： css css3 es6 javascript vue.js

本文链接：https://blog.csdn.net/qq_26657121/article/details/106597963

版权

学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

最近在做一个自己练手的项目时，用到了轮播图，然后自己憋了一个小时，写成了向右滑动的动画效果，于是上网看了一下教程，因为教程也讲了其他东西，所以一直没有快进，花了一个小时，下来自己直接撸码花了三个小时。下面看一下初步成果吧。

实现功能与介绍

实现功能：

图片定时切换
小圆点随图片切换，样式改变；可通过点击小圆点控制显示第几张图
左右切换按钮在鼠标移入图片区域之后显示，可通过点击按钮控制显示上一张或者下一张图

实现介绍

肯定说的不是很好，但是还是要尽量总结一下：
- 肯定是先有一个大盒子，给盒子设置宽高，然后让盒子居中显示；
- 然后里边再给放图片的小盒子，小盒子也一定要设置宽高，图片要显示多大就设置多少；
- 我们给放每张图片的小盒子设置绝对定位 position: absolute,使其脱离文档流，悬浮于元素之上;
- 现在图片都是叠在一起的，页面只显示一张图片，然后通过设置每个图片盒子的z-index，使图片在所有图片最上边显示；
- js实现部分：通过js给改变元素的class，class样式写在css中，图片盒子为.show ,改变图片盒子的z-index，小圆点为.active，设置原定被选中的样式；

*总结与分析

1、总结

相对定位 position:relative

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
- 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
  如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动
```
#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}
```
绝对定位 position: absolute

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
- 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
- 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
  
  注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。
  提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
```
#box_absolute {
    position: absolute;
    left: 30px;
    top: 20px;
}
```
relative定位与absolute定位的区别
- relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。
- absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。
设置元素透明
- 相同点：rgba()和opacity都能实现透明效果；
- 不同点：opacity作用于元素，以及元素中所有的内容；
  rgba()只用于于元素的颜色，及背景色；
```
  *根据自己使用实际情况说明：如果是整个元素的透明度（包含元素内容）使用 opacity，如果设置背景色透明度，使用rgba。
```

2、程序分析

图往右切换时有点卡，可能和定时器有关，试了下清除和重启定时器也不太顶用，希望大佬能指导下
切图效果略显生硬，没有淡入淡出、图片左右移动的效果，这个会在下篇文章之前学习实现

切图效果已实现
设置图片左移位置，然后显示时的左移位置，再加上过过渡效果，就实现了，源码为完整源码；

源码

//html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图学习</title>
</head>
<body>
    <div class="banner-contain">
        <ul>
            <li class="show"><img src="./images/v1.jpg"></li>
            <li><img src="./images/v2.png"></li>
            <li><img src="./images/v3.jpg"></li>
            <li><img src="./images/v4.jpg"></li>
            <li><img src="./images/v5.jpg"></li>
            <div class="btn">
                <button onclick="goLeft()"><</button>
                <button onclick="goRight()">></button>
            </div>
            <div class="button">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span class="active"></span>
            </div>
        </ul>
    </div>
    <script src="./ctrl.js"></script>
</body>
</html>

// style.css

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: aquamarine;
    box-sizing: border-box;
}

.banner-contain {
    height: 350px;
    width: 1000px;
    margin: auto;
    position: relative; 
    top: 30px;
}
.banner-contain ul {
    list-style: none;
}
.banner-contain li {
    width: 1000px;
    height: 350px;
    opacity: 0;
    position: absolute;
    left: 1000px;
}


.banner-contain img{
    height: 350px;
    width: 1000px;  
}

ul .show {
    z-index: 4;
    opacity: 1;
    left: 0px;
    transition: 0.6s;
}

.button {
    display: flex;
    z-index: 5;
    position: absolute;
    justify-content: space-between;
    right: 60px;
    bottom: 45px;;
}

.button span{
    cursor: pointer;
    width: 10px;
    height: 10px;
    margin: 0px 4px;
    border-radius: 50%;
    background-color:aliceblue, .4;
    border: 2px #404040 solid;
}

.button span.active {
    background-color:  #404040; 
}

.btn{
    position: absolute;
    top: 40%;
    display: flex;
    left: 15px;
    width: 970px;
    align-items: center;
    justify-content: space-between;
}
.btn button {
    width: 50px;
    height: 50px;
    border: none;
    color: orange;
    cursor: pointer;
    line-height: 50px;
    background-color: rgba(255,255,255,0.4);
    opacity: 0;
    border-radius: 50%;
    outline: none;
    font-size: 35px;
    z-index: 9;
}

ul:hover button {
    transition: 0.8s;
    opacity: 1;
}

//js

let spans = document.getElementsByTagName("span");
let lis = document.getElementsByTagName("li");
let btns = document.getElementsByTagName("button");
let sIndex = 0;
var aaa = setInterval(function() {
    goIndex (sIndex);
    sIndex++;
},3000);
// goIndex(sIndex);

function goIndex (index) {
    sIndex=index;
    if (index >= spans.length) {
        sIndex = index = 0;
    } else if (index < 0) {
        sIndex = index = spans.length-1;
    }
    var iii = spans.length - sIndex-1;
    for (var i=0;i<spans.length;i++) {
        spans[i].className = "";
        lis[i].className = "";
    }
    spans[iii].className = "active";
    lis[index].className = "show";
}

for(var i=0;i<spans.length;i++) {
    (function(i){
        spans[i].onclick = function() {
            goIndex(spans.length - i - 1);
        }
    }(i))
}

function goLeft() {
    goIndex(++sIndex);
}

function goRight() {
    goIndex(--sIndex);  
}

Sys_菜菜

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
轮播图学习总结之一(有源码)

最近在做一个自己练手的项目时，用到了轮播图，然后自己憋了一个小时，写成了向右滑动的动画效果，于是上网看了一下教程，因为教程也讲了其他东西，所以一直没有快进，花了一个小时，下来自己直接写花了三个小时。下面看一下初步成果吧。实现功能与介绍实现功能：图片定时切换小圆点随图片切换，样式改变；可通过点击小圆点控制显示第几张图左右切换按钮在鼠标移入图片区域之后显示，可通过点击按钮控制显示上一张或者下一张图实现介绍肯定说的不是很好，但是还是要尽量总结一下：肯定是先有一个大盒子，给盒子设置宽高，然后
复制链接

扫一扫