轮播图的实现

深碍√TFBOYSˉ_ 2022-05-22 22:54 270阅读 0赞

# 轮播图的实现, 已封装 #

### 轮播 ###

轮播图在网页搭建中经常遇到, 与轮播有关的卡片滑块也常见,  所以有必要理解其中的原理

## 轮播图HTML中应包含几个部分? ##

1.  视觉窗口,即可见区域
2.  包含所有图片的容器
3.  具体的每一张轮播图片
4.  锚点列表, 点击可跳到具体某一页
5.  左右切换按钮

## 让每一个轮播页大小刚好等于视图窗口大小 ##

1.  设置视图窗口宽度,  让超过的部分隐藏
2.  设置包含所有图片的容器的宽度为 10000%, 目的是为了让容器足够大.  因为如果容器不够大的话容器中每一张图片就算设定了固定宽度也还是会受到挤压导致一定程度的变形.  
    这里设置的宽度10000%为相对与父div(视图窗口)的100倍, 即100% \* 100;  所以这个轮播图最多可装下100个轮播页面
3.  设置每一个轮播页面的宽度为父div (容器) 1%, 刚好等于爷爷div (视图窗口) 的大小, 即 100% =  100% \* 100 \* 1% .  这时视图窗口div中就刚好可见一个轮播页.

## 每一次滚动图片JS需要做什么? ##

1.  改变索引, 添加class使对应锚点设为选中状态
2.  计算这次滚动到终点时包含所有图片的容器需要相对与视图窗口左移的位置
3.  清空定时器(防止开启多个重名定时器导致图片滚动速度收到影响)
4.  开启定时器(刷新速度一般为10~20ms), 每一次将图片移动一定的距离,  直达到达这次移动重点时清空定时器

## 如何让轮播图自动滚动? ##

设置一个定时器(刷新速度没几秒一次), 每次调用一次轮播的移动函数

## 如何实现无缝轮播(最后一张转到第一张时的衔接) ##

1.  在最后一张轮播图后复制一份第一张轮播图, 放到最后, 让第一页和最后一页完全相同
2.  最后一张轮播图移动到终点时将包含所有图片的容器的左偏移量设为0, 即最后一张滚动到终点时瞬间将第一张轮播图放置于视图窗口中, 看起来就无缝了

## 让滚动速度为匀减速运动 ##

因为匀速运动的轮播不是很好看, 所以可以通过JS控制移动速度

在定时器中每一次移动距离可以设置为

移动距离 = (终点 - 当前位置) / 15;

这个15是随便写的, 终点 -当前位置在除以一个大于一的数, 这个数每次计算时都会变小, 所以成功做到了变速运动.

## HTML ##

<div id="container">
        
        <div id="inner" class="clear">
            <img style="background:red;" src="#1#" alt="">
            <img style="background:orange;" src="#2#" alt="">
            <img style="background:green;" src="#3#" alt="">
            <img style="background:cyan;" src="#4#" alt="">
            <img style="background:yellow;" src="#5#" alt="">
            <img style="background:purple;" src="#6#" alt="">
            <img style="background:pink;" src="#7#" alt="">
            <img style="background:blue;" src="#8#" alt="">
            <img style="background:red;" src="#1#" alt="">
        </div>
        <div class="paganation" id="paganation">
            
            <span class="selected">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
        </div>
        <div id="left" class="arrow">
            <  
        </div>
        <div id="right" class="arrow">
            >  
        </div>
     </div>

## CSS ##

* {
        
        margin: 0;
        padding: 0;
        border: 0;
    }
    #container {
        
        width: 510px;
        height: 286px;
        margin: 0 auto;
        position: relative;
        background: pink;
        overflow: hidden;
    }
    
    #inner {
        
        width: 10000%;/*设置的宽度10000%为相对与视图窗口的100倍*/
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    
    #inner img {
        
        width: 1%;
        height: 100%;
        float: left;
    }
    .paganation {
        
        width: 100%;
        position: absolute;
        bottom: 10px;
        text-align: center;
    }
    .paganation span {
        
        padding: 5px 8px;
        background: #F2F2F2;
        color: red;
        border-radius: 50%;
        cursor: pointer
    }
    .paganation .selected {
        
        background: #888;
        color: white;
    }
    .arrow {
        
        position: absolute;
        top: 0;
        width: 30px;
        height: 286px;
        line-height: 286px;
        text-align: center;
        color: white;
        cursor: pointer;
    }
    #right {
        
        right: 0;
    }
    .arrow:hover {
        
        background: rgba(0, 0, 0, 0.5);
    }

## JS ##

var container = document.getElementById("container");
    var inner = document.getElementById("inner");
    var spanList = document.getElementById("paganation").getElementsByTagName("span");
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var carousel = new Carousel(container, inner, spanList, left, right, 15, true);

## Carousel 轮播类 ##

因为轮播的实现需要定义许多变量并使用几个函数, 所以在此将其封装成类, 使用方式为上面JS部分, 依次传入  视图窗口dom, 包含所有图片的容器dom, 锚点dom数组, 左移按钮dom, 右移按钮dom, 移动速度控制(值越小移动越快), 是否自动滚动, 自动滚动周期 . 必传参数为前3个.没有进行判断和抛错, 也没有写属性设置, 只是简单封装一下

[网上的一些博客][Link 1]

[我的入门教程][Link 2]

(这篇文章是我原创，之前发表在实验室的官网中，[链接][Link 3])

[Link 1]: https://www.cnblogs.com/LIUYANZUO/p/5679753.html
[Link 2]: https://www.imooc.com/article/7393
[Link 3]: http://www.xiexianbo.xin/wordpress/?p=550