用JavaScript做简单的轮播图

其他 2020-03-06 10:19:42 阅读次数: 0

1. 用display属性的block或none控制轮播图

代码如下：

<!DOCTYPE HTML>

<head>
    <meta a charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #desktop {
            width: 100px;
            height: 100px;
            margin: 10px auto;
        }
        
        #img1 {
            display: block;
            width: 100px;
            height: 100px;
            background: red;
        }
        
        #img2,
        #img3,
        #img4 {
            display: none;
            width: 100px;
            height: 100px;
        }
        
        #img2 {
            background: yellow;
        }
        
        #img3 {
            background: blue;
        }
        
        #img4 {
            background: pink;
        }
        
        #prev {
            position: absolute;
            left: 46%;
            top: 6%;
        }
        
        #next {
            position: absolute;
            left: 53%;
            top: 6%;
        }
        
        #button {
            position: absolute;
            left: 47%;
            margin: 10px auto;
        }
        
        #button a {
            border-radius: 50%;
            color: black;
            text-decoration: none;
            margin-right: 20px;
        }
    </style>
    <script>
        window.onload = function() {
            var thisPage = 1; //开始默认第一张轮播图序号是1
            var i = 0;

            document.getElementById("prev").onclick = function() {
                //先将所有轮播图全关掉 
                for (i = 1; i <= 4; i++) {
                    document.getElementById("img" + i).style.display = "none";
                };
                thisPage--; //每点击一次向前按钮这个序号减1
                if (thisPage == 0) {
                    //当它为0时，令它等于最后一张轮播图对应的序号
                    thisPage = 4;
                };
                document.getElementById("img" + thisPage).style.display = "block";
            };

            document.getElementById("next").onclick = function() {
                //同样，将所有轮播图全关掉
                for (i = 1; i <= 4; i++) {
                    document.getElementById("img" + i).style.display = "none";
                };
                thisPage++; //每点击一次向前按钮这个序号加1
                if (thisPage == 5) {
                    //当它不小心超出范围时让它回到第一张轮播图
                    thisPage = 1;
                };
                document.getElementById("img" + thisPage).style.display = "block";
            };

            //给每个按钮添加属性
            document.getElementById("button1").onclick = function() {
                //同样，先将所有轮播图关闭
                for (var k = 1; k <= 4; k++) {
                    document.getElementById("img" + k).style.display = "none";
                };
                thisPage = 1; //将当前页面的序号更新
                document.getElementById("img1").style.display = "block";
            };

            document.getElementById("button2").onclick = function() {
                //同样，先将所有轮播图关闭
                for (var k = 1; k <= 4; k++) {
                    document.getElementById("img" + k).style.display = "none";
                };
                thisPage = 1; //将当前页面的序号更新
                document.getElementById("img2").style.display = "block";
            };

            document.getElementById("button3").onclick = function() {
                //同样，先将所有轮播图关闭
                for (var k = 1; k <= 4; k++) {
                    document.getElementById("img" + k).style.display = "none";
                };
                thisPage = 1; //将当前页面的序号更新
                document.getElementById("img3").style.display = "block";
            };

            document.getElementById("button4").onclick = function() {
                //同样，先将所有轮播图关闭
                for (var k = 1; k <= 4; k++) {
                    document.getElementById("img" + k).style.display = "none";
                };
                thisPage = 1; //将当前页面的序号更新
                document.getElementById("img4").style.display = "block";
            };
        }
    </script>
</head>

<body>
    <div id="desktop">
        <div id="img1"></div>
        <div id="img2"></div>
        <div id="img3"></div>
        <div id="img4"></div>
    </div>
    <input type="button" value="←" id="prev">
    <input type="button" value="→" id="next">
    <div id="button">
        <a href="javascript:;" id="button1">1</a>
        <a href="javascript:;" id="button2">2</a>
        <a href="javascript:;" id="button3">3</a>
        <a href="javascript:;" id="button4">4</a>
    </div>
</body>

</html>

如果觉得最后一部分js代码有些多余的话可以这样修改：

        window.onload = function() {
            var i = 0;
            var sum = 0;

            document.getElementById("prev").onclick = function() {
                //先将所有轮播图全关掉 
                for (i = 1; i <= 4; i++) {
                    document.getElementById("img" + i).style.display = "none";
                };
                thisPage--; //每点击一次向前按钮这个序号减1
                if (thisPage == 0) {
                    //当它为0时，令它等于最后一张轮播图对应的序号
                    thisPage = 4;
                };
                document.getElementById("img" + thisPage).style.display = "block";
            };

            document.getElementById("next").onclick = function() {
                //同样，将所有轮播图全关掉
                for (i = 1; i <= 4; i++) {
                    document.getElementById("img" + i).style.display = "none";
                };
                thisPage++; //每点击一次向前按钮这个序号加1
                if (thisPage == 5) {
                    //当它不小心超出范围时让它回到第一张轮播图
                    thisPage = 1;
                };
                document.getElementById("img" + thisPage).style.display = "block";
            };

            //给每个按钮添加属性
            document.getElementById("button" + 1).onclick = function() {
                button(1);
            };
            document.getElementById("button" + 2).onclick = function() {
                button(2);
            };
            document.getElementById("button" + 3).onclick = function() {
                button(3);
            };
            document.getElementById("button" + 4).onclick = function() {
                button(4);
            };
        }

        var thisPage = 1; //开始默认第一张轮播图序号是1,把它放到这声明，代表它是一个全局变量

        function button(sum) {
            for (var k = 1; k <= 4; k++) {
                document.getElementById("img" + k).style.display = "none";
            };
            thisPage = sum; //将当前页面的序号更新
            document.getElementById("img" + sum).style.display = "block";
        };

原理就是函数的封装,不过代码应该还能继续精缩，进一步缩短的话可以利用我下面代码中的this.index，用for循环来给button一键添加onclick事件，让它变得更短小精悍。

2.利用偏移值来控制轮播图

代码如下

<!DOCTYPE HTML>

<head>
    <meta a charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #page_contain {
            position: relative;
            overflow: hidden;
            left: 47%;
        }
        
        #desktop {
            position: absolute;
            display: flex;
            flex-direction: row;
        }
        
        #img1 {
            width: 100px;
            height: 100px;
            background: red;
        }
        
        #img2,
        #img3,
        #img4 {
            width: 100px;
            height: 100px;
        }
        
        #img2 {
            background: yellow;
        }
        
        #img3 {
            background: blue;
        }
        
        #img4 {
            background: pink;
        }
        
        #prev {
            position: absolute;
            left: 46%;
            top: 6%;
        }
        
        #next {
            position: absolute;
            left: 53%;
            top: 6%;
        }
        
        #button {
            position: absolute;
            left: 47%;
        }
        
        #button a {
            border-radius: 50%;
            color: black;
            text-decoration: none;
            margin-right: 20px;
        }
    </style>
    <script>
        window.onload = function() { //页面加载时执行该函数
            //获取元素
            var pageContain = document.getElementById("page_contain");
            var oDiv = document.getElementById("desktop");
            var aDiv = oDiv.getElementsByTagName("div");
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var obutton = document.getElementById("button");
            var abutton = obutton.getElementsByTagName("a");

            pageContain.style.height = aDiv[0].offsetHeight + 'px';
            pageContain.style.width = aDiv[0].offsetWidth + 'px';
            oDiv.style.width = aDiv.length * aDiv[0].offsetWidth + 'px';
            oDiv.style.height = aDiv[0].offsetHeight + 'px';
yuan
            prev.onclick = function() {
                //所加的if语句是为了将轮播的图片首尾相连
                if (oDiv.offsetLeft >= 0) {
                    oDiv.style.left = -(aDiv.length - 1) * aDiv[0].offsetWidth + 'px';
                } else {
                    oDiv.style.left = oDiv.offsetLeft + aDiv[0].offsetWidth + 'px';
                }
            };
            next.onclick = function() {
                //所加的if语句是为了将轮播的图片首尾相连
                if (oDiv.offsetLeft <= -(aDiv.length - 1) * aDiv[0].offsetWidth) {
                    oDiv.style.left = "0";
                } else {
                    oDiv.style.left = oDiv.offsetLeft - aDiv[0].offsetWidth + 'px';
                }
            }
            //利用循环快速的给按钮控制图片的移动添加样式
            for (var i = 0; i < aDiv.length; i++) {
                abutton[i].index = i;
                abutton[i].onclick = function() {
                    oDiv.style.left = -this.index * aDiv[0].offsetWidth + 'px';
                }
            }
        }
    </script>
</head>

<body>
    <div id="page_contain">
        <div id="desktop">
            <div id="img1">这是1</div>
            <div id="img2">这是2</div>
            <div id="img3">这是3</div>
            <div id="img4">这是4</div>
        </div>
    </div>
    <input type="button" value="←" id="prev">
    <input type="button" value="→" id="next">
    <div id="button">
        <a href="javascript:;" id="button1">1</a>
        <a href="javascript:;" id="button2">2</a>
        <a href="javascript:;" id="button3">3</a>
        <a href="javascript:;" id="button4">4</a>
    </div>
</body>
</html>

原理：
在这里插入图片描述
通过控制desktop的 Left值，来控制page_contain显示的镜头，模拟了一个拉动纸带的过程。不过在这里要注意的是desktop的 position属性一定要用absolute，page_contain的position要设为relative。

陌言丶
发布了2 篇原创文章 · 获赞 14 · 访问量 116
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_45838541/article/details/104349033
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022