超详细轮播图，让你彻底明白轮播图！

前端开发 HTML 轮播图

创建时间:2019-08-16 08:57

字数:1.2k 阅读:

超详细轮播图，让你彻底明白轮播图！

超详细轮播图，让你彻底明白轮播图！

刚开始学JavaScript时候很多新手都会尝试写一些简单的小项目，轮播图应该是写的最多的。但是很多时候对于基础不是很好的新手，虽然参照别人的代码能写出来一些轮播图，但其中的一些细节和过程可能还是一知半解甚至不懂，我作为一个新手刚刚写了几种常见的轮播图，里面的各种细节也花了不少时间弄懂，这里为大家介绍一种简单易懂且很完善的轮播图写法。里面的细节我会一一详细说明，希望和各位初入JavaScript的小伙伴一起进步。

　　轮播图的思路其实很简单：就是用JavaScript来控制轮播的图片的样式，可以控制display：none or block 可以控制opacity：‘0’ or ‘1’ 也可以通过z-index来控制图片的摆放顺序。(注意：这里的图片一般是通过绝对定位放在一个div盒子里面，图片堆叠在一起)。思路很清晰，那么我们就来看看代码(代码是本人自己手写的)。具体细节我会在代码中一一解释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #main{
            width: 730px;
            height: 454px;
            margin: 100px auto;
            position: relative;

        }
        #main .scollimg{
            width: 730px;
            height: 454px;
            position: relative;
        }
        #main .scollimg img{
            position: absolute;
            top: 0;
            left: 0;
        }
        #main .btn{
            width: 730px;
            height: 220px;
            position: absolute;
            top:117px;
            left: 0;
        }
        #main .btn>div{
            width: 100px;
            height: 220px;
            background: #fff;
            opacity: 0;
        }
        #main .btn：hover>div{
            opacity: 0.35;
        }
        #main .btn #btnleft{
            position: absolute;
            top: 0;
            left: 0;
        }
        #main .btn #btnright{
            position: absolute;
            top: 0;
            right:0;
        }
        /*左右button里的三角形*/
        .triangle{
             margin-top: 50px;
            width: 0;
            height: 0;
            border-width:70px 40px;
            border-style: solid;
        }

        #main .btn #btnleft .triangle{
            border-color: transparent #ccc transparent  transparent;
        }
        #main .btn #btnright .triangle{
            margin-left: 20px;
            border-color: transparent transparent transparent #ccc;
        }
        #main .item{
            position: absolute;
            bottom: 30px;
            left: 70px;
            width: 200px;
            height: 16px;
        }
        #main .item span{
            width: 16px;
            height: 16px;
            background: #ccc;
            display: inline-block;
            border-radius: 50%;
        }
        #main .item span:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="scollimg">
            <img src="images/1.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/3.jpg" alt="">
        </div>
        <div class="btn">
            <div id="btnleft"><div class="triangle"></div></div>
            <div id="btnright"><div class="triangle"></div></div>
        </div>
        <div class="item">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script type="text/javascript">
        window.onload=function(){
            autoMove('img','span');
        }

        //轮播图函数
        function autoMove(tagImg,tagSpan){
            var imgs=document.getElementsByTagName(tagImg);
            var spans=document.getElementsByTagName(tagSpan);
            //每次轮播后样式
            /*轮播到哪个位置，就对哪个位置的图片样式进行设置，首先让所有的图片样式opacity变为0，然后对移动到的位置的样式进行设置opacity为1*/
            function InitMove(index){
                for(var i=0;i<imgs.length;i++){
                    imgs[i].style.opacity='0';
                    spans[i].style.background='#ccc';
                }
                imgs[index].style.opacity='1';
                spans[index].style.background='red';
            }
            //第一次初始化
            InitMove(0);
            //轮播过程的变换函数
            /*前面已经初始化了图片最开始看到的效果，接着轮播的话会隐藏第一张出现第二张
             *这里count从1开始（图片的初始化位置是count为0的情况），count=1执行一次Init*Move(count),使第一张隐藏第二张出现，依次执行。当count==imgs.leghth时由于*图片最后一张的位置是imgs.length-1,所以此时把count置为0；相当于轮播图轮回
             *依次重新开始。
             */
            var count=1;
            function fMove(){
                if(count==imgs.length){
                    count=0;
                }
                InitMove(count);
                count++;
            }
            //设置自动轮播定时器；
            var scollMove=setInterval(fMove,2500);

            //点击移动图片；
            /*这里就是点击左右移动的button来让图片根据用户的点击左右移动；需要注意一点就*是每次点击左移动或右移动需要首先清除定时器，等移动完了在重新添加定时器不然的*话你点击移动后图片虽然该变了，但是由于定时器还没移动到这张图片上面，所以就需*要等待定时器移动到你移动到的那张图片上面让后才开始定时轮播。比如如果你从开始
            *就点击移动图片，一直移动到最后一张那么你就要等待两个定时器的时间才能看到自动*轮播。
            */
            var btnleft=document.getElementById('btnleft');
            var btnright=document.getElementById('btnright');
            btnleft.onclick=function(){
                clearInterval(scollMove);
                if(count==0){
                    count=imgs.length;
                }
                count--;
                InitMove(count);
                scollMove=setInterval(fMove,2500);
            };
            btnright.onclick=function(){
                clearInterval(scollMove);
                fMove();
                scollMove=setInterval(fMove,2500);
            }
        }




    </script>
</body>
</html>

这就是最基本的轮播图，效果基本没有什么问题。通用性强。

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以加QQ（2602138376）