原生js实现轮播图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js实现轮播图相关的知识,希望对你有一定的参考价值。

  很多网站上都有轮播图,使用起来也比较炫酷,但找到一个系统的介绍却很难,这里做一个简单的介绍。

 

原理:将一些列的图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播。

 

步骤一:

  建立html基本布局,如下所示:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <div class="container">
        <div class="wrap" style="left:-600px;">
            <img src="./img/5.jpg" alt="">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
            <img src="./img/1.jpg" alt="">
        </div>
        <div class="buttons">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <a href="javascript:;" class="arrow_left">&lt;</a>
        <a href="javascript:;" class="arrow_right">&gt;</a>
    </div>
</body>
</html>

   只有五张图片,却使用7张来轮播,这是为了实现无缝轮播,后面会详细介绍。

  而5个span,即我们可以实时看到轮播图目前所处的位置。

  最后是两个按钮,可以通过它来控制前进与后退。

  这里我们需要对wrap使用绝对定位,所以用left:-600px;将第一张图片显示出来。

 

步骤二: css布局

  首先,resetcss,如下所示:

        * {
            margin:0;
            padding:0;
        }
        a{
            text-decoration: none;
        }

  接着,我们为了让图片只在container中,所以需要限定其宽度和高度并且使用overflow:hidden;将其余的图片隐藏起来,并且我们希望wrap相对于container左右移动,所以设置为relative,如下:

       .container {
            position: relative;
            width: 600px;
            height: 400px;
            margin:100px auto 0 auto;
            box-shadow: 0 0 5px green;
            overflow: hidden;
        }            

 

  我们设置wrap是绝对定位的,所以,我们就可以通过控制Left和Right来控制图片的移动了。设置z-index:1;以对后面将要放置的buttons作为参考。 因为共有七张图片,所以width为4200px(每张图片我们设置为600X400),我们只需让图片左浮动即可实现占满一排了。

        .wrap {
            position: absolute;
            width: 4200px;
            height: 400px;
            z-index: 1;
        }

   然后我们把图片设置位左浮动,并限定其大小,如下所示:

    .container .wrap img {
            float: left;
            width: 600px;
            height: 400px;
        }

  现在的效果如下:

     技术分享

  即这时已经显示出了第一张图片。并且充满了整个container(container是有box-shadow的);

 

  然后我们把显示次序的buttons放在图片的右下角。并且设置z-index:2;以保证buttons是在图片的上面的。

       .container .buttons {
            position: absolute;
            right: 150px;
            bottom:20px;
            width: 100px;
            height: 10px;
            z-index: 2;
        }

 

  然后将buttons下面的span做一个简单的修饰,并且给和图片对应的span设置一个on类,如下:

        .container .buttons span {
            margin-left: 5px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: green;
            text-align: center;
            color:white;
            cursor: pointer;
        }
        .container .buttons span.on{
            background-color: red;
        }

   接下来,我们把左右切换的箭头加上,然后做简单的修饰,注意:因为这里使用实体来表示左右箭头,所以设置font-size才能改变其大小,

        .container .arrow {
            position: absolute;
            top: 35%;
            color: green;
            padding:0px 14px;
            border-radius: 50%;
            font-size: 50px;
            z-index: 2;
            display: none;
        }
        .container .arrow_left {
            left: 10px;
        }
        .container .arrow_right {
            right: 10px;
        }
        .container:hover .arrow {
            display: block;
        }
        .container .arrow:hover {
            background-color: rgba(0,0,0,0.2);
        }

 

    

 

以上是关于原生js实现轮播图的主要内容,如果未能解决你的问题,请参考以下文章

原生JS实现轮播图

原生js实现轮播图

原生js简单轮播图 代码

原生Js写轮播图代码

用原生JS 写Web首页轮播图

原生JS实现简易轮播图