欢迎光临
我们一直在努力

JavaScript | 做一个最简单的轮播图

实现原理:

  • 把所有的img(position)放在一个div(relative)里,多出部分overflow:hidden
  • 添加左右图片以及小圆点,当点击时设置点击事件
  • 创建pos变量用于存放当前图片是第几张
  • 通过点击事件判断pos变量的值确定要转换到哪张图片
  • 通过图片的position设置当前应当显示的图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .crousel
        {
            width:1500px;
            height: 500px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }
        .imgCon{
            width:7500px;
            height: 500px;
            position: absolute;
            font-size: 0;
            transition: all 0.5s;
            left:0;
        }
        .imgCon>img{
            width:1500px;
            height: 500px;
        }
        .leftBn,.rightBn{
            position: absolute;
            top:220px;
        }
        .leftBn{
            left:50px;
        }
        .rightBn{
            right: 50px;
        }
        ul{
            list-style: none;
            position: absolute;
            margin: 0;
            padding: 0;
            bottom: 50px;
            left:640px;
        }
        li{
            width: 28px;
            height: 28px;
            border: 2px solid gray;
            float: left;
            border-radius: 50%;
            margin-left: 20px;
        }
        li:nth-child(1){
            margin-left: 0;
        }
        .clear::after
        {
            content: "";
            height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
        .clear{
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="crousel">
        <div class="imgCon">
            <img src="./0402img/a.jpeg">
            <img src="./0402img/b.jpeg">
            <img src="./0402img/c.jpeg">
            <img src="./0402img/d.jpeg">
            <img src="./0402img/e.jpeg">
        </div>
        <img src="./0402img/left.png" class="leftBn">
        <img src="./0402img/right.png" class="rightBn">
        <ul class="clear">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var imgCon,leftBn,rightBn,list,prevDot;
        var pos = 0;

        init();
        function init(){
            // 获取所有图片容器,左右按钮
            imgCon=document.querySelector(".imgCon");
            leftBn=document.querySelector(".leftBn");
            rightBn=document.querySelector(".rightBn");
            // 将所有li获取并且转换为数组
            list=Array.from(document.querySelectorAll("li"));
            // 给左右按钮增加点击事件
            leftBn.onclick=clickHandler;
            rightBn.onclick=clickHandler;
            // list是所有小圆点的数组,遍历这个数组
            list.forEach(function(item){
                // 给每个小圆点增加点击事件
                item.onclick=dotClickHandler;
            });
            changeDot();
        }
        function clickHandler(){
            // 如果点击左边的按钮
            if(this===leftBn){
                pos--;
                if(pos<0) pos=4;
            }else{
                // 如果点击了右边的按钮
                pos++;
                if(pos>4) pos=0;
            }
            imgCon.style.left=pos*-1500+"px";
            changeDot();
        }

        function dotClickHandler(){
            // this就是被点击的元素,list是所有小圆点的数组
            // 查找当前点击小圆点是数组中第几个,这个第几个正好就是我们要显示第几张图片
           pos=list.indexOf(this);
           imgCon.style.left=pos*-1500+"px";
           changeDot();
        }

        function changeDot(){
            // 如果上一个小圆点变量存在时
            if(prevDot){
                // 设置上一个小圆点的背景色透明
                prevDot.style.backgroundColor="rgba(255,0,0,0)";
            }
            // list是小圆点的数组,pos是当前应该显示第几张图
            // 将上一个小圆点变量设置为当前这个小圆点数组中对应的那个小圆点
            prevDot=list[pos];
            // 并且设置当前这个小圆点背景色为红色
            prevDot.style.backgroundColor="rgba(255,0,0)";
        }
    </script>
</body>
</html>
赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | 做一个最简单的轮播图
分享到: 更多 (0)

评论 抢沙发

6 + 4 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏