利用Html css和Javascript制作简单的轮播图

最新推荐文章于 2024-05-28 19:26:08 发布

泪，千殇！

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量1.5k

点赞数 1

文章标签： javascript css html5

本文链接：https://blog.csdn.net/weixin_44162345/article/details/109801892

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、轮播图是什么
二、使用步骤

前言

在前端的初级学习过程中，学会制作一些简单的小页面显得尤为重要，下面我们将一起学习利用Html css和Javascript如何制作一个简单的轮播图。

一、轮播图是什么

轮播图：在一个模块或者说窗口，通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。

二、使用步骤

1.首先将我们需要的页面进行简单的布局

代码如下：

<body>
<div class="box">
            <ul class="ul1" id="ul1">
                <li><img src="images/1.jpg" width="520px" height="280px"></li>
                <li><img src="images/2.jpg" width="520px" height="280px"></li>
                <li><img src="images/3.jpg" width="520px" height="280px"></li>
                <li><img src="images/4.jpg" width="520px" height="280px"></li>
                <li><img src="images/5.jpg" width="520px" height="280px"></li>
            </ul>
            <div class="left-button indexs" id = "left-button">&lt;</div>
            <div class="right-button indexs" id = "right-button">&gt;</div>
            <ul class="ul2 indexs" id="ul2">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        </body>

2.然后利用CSS对body内容进行定位和样式的编写

代码如下：

<style type = "text/css">
        /*设置整体字体大小为12px*/
            *{
                font-size: 12px;
            }
        /*消除默认样式*/
            ul{
                margin: 0;
                padding: 0;
                list-style: none;
            }
        /*设置容器大小以及居中显示*/
            .box{
                width: 520px; 
                height: 280px; 
                position: relative;
                border: 1px red solid;
                margin: 50px auto;
            }
        /*对图片的位置进行定位*/
            .ul1{
                width: 100%;
                height: 100%;
            }
            .ul1>li{
                position: absolute;
                top: 0;
                left: 0;
            }
        /*对左右两侧按钮进行定位并设置样式*/
            .left-button{
                width: 35px;
                height: 70px;
                background-color: #00000050;
                color: #fff;
                font-size: 28px;
                text-align: center;
                line-height: 70px;
                position: absolute;
                top:50%;
                left: 0;
                margin-top: -35px;
                border-radius: 0 5px 5px 0;
            }
            .left-button:hover{
                cursor: pointer;
            }
            .right-button{
                width: 35px;
                height: 70px;
                background-color: #00000050;
                color: #fff;
                font-size: 28px;
                text-align: center;
                line-height: 70px;
                position: absolute;
                top:50%;
                right:0;
                margin-top: -35px;
                border-radius: 5px 0 0 5px;
            }
            .right-button:hover{
                cursor: pointer;
            }
        /*对图片下方圆点进行定位及设置样式*/
            .ul2{
                position: absolute;
                bottom: 20px;
                left: 50%;
                margin-left: -50px;
            }
            .ul2>li{
                width: 20px;
                height: 20px;
                background-color: white;
                text-align: center;
                line-height: 20px;
                float: left;
                border-radius: 100%;
                margin-right: 10px;
            }
            .ul2>li:hover{
                background-color: red;
                color: #fff;
                cursor: pointer;
            }
            .ul2>li:nth-child(1){
                background-color: red;
                color: #fff;
            }
        /*令第一张图片显示在页面，其他图片隐藏*/
            .ul1>li:nth-child(1){
                z-index: 100;
            }
        /*让下方圆点显示在图片之上*/
            .indexs{
                z-index: 1000;
            }
        </style>

3.接下来是用Javascript对事件进行绑定

1. 设计定时器，令图片2秒钟换一次

代码如下：


            dingshiqi = setInterval(function(){
                index++;
                if(index == imgs.length){
                    index = 0;
                }
                for(var i = 0; i <imgs.length; i++){
                    imgs[i].style.cssText="z-index:0;";
                    button[i].style.cssText="background-color:#fff;color:#000;";
                }
                imgs[index].style.cssText="z-index:100;";
                button[index].style.cssText="background-color: red;color:white";
            },2000);

2. 对左右两边按钮进行绑定事件，点击左边按钮，展示上一张图片，点击右边按钮，展示下一张图片

代码如下：


            leftButton.onclick = function(){
            clearInterval(dingshiqi);
            index--;
            if(index < 0){
                index = imgs.length - 1;
            }
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText="background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[index].style.cssText="background-color: red;color:white";
            congqi();
        }

        rightButton.onclick = function(){
            clearInterval(dingshiqi);
            index++;
            if(index > imgs.length - 1){
                index = 0;
            }
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText="background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[index].style.cssText="background-color: red;color:white";
            congqi();
        }

3.图片下方5个按钮绑定事件，点击哪个按钮，跳转至相应图片及按钮

代码如下：


            button[0].onclick = function(){
            clearInterval(dingshiqi);
            index = 0;
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText = "background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[0].style.cssText = "background-color:red;color:white";
            congqi();
        }

        button[1].onclick = function(){
            clearInterval(dingshiqi);
            index = 1;
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText = "background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[1].style.cssText = "background-color:red;color:white";
            congqi();
        }

        button[2].onclick = function(){
            clearInterval(dingshiqi);
            index = 2;
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText = "background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[2].style.cssText = "background-color:red;color:white";
            congqi();
        }

        button[3].onclick = function(){
            clearInterval(dingshiqi);
            index = 3;
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText = "background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[3].style.cssText = "background-color:red;color:white";
            congqi();
        }

        button[4].onclick = function(){
            clearInterval(dingshiqi);
            index = 4;
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText = "background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[4].style.cssText = "background-color:red;color:white";
            congqi();
        }

4.对Javascript部分代码进行合并

代码如下：


            <script type="text/javascript">
        var imgs = document.getElementById("ul1").children;
        var button = document.getElementById("ul2").children;
        var leftButton = document.getElementById("left-button");
        var rightButton = document.getElementById("right-button")
        var index = 0;
        var dingshiqi;
        congqi();

        function congqi(){
            dingshiqi = setInterval(function(){
                index++;
                if(index == imgs.length){
                    index = 0;
                }
                for(var i = 0; i <imgs.length; i++){
                    imgs[i].style.cssText="z-index:0;";
                    button[i].style.cssText="background-color:#fff;color:#000;";
                }
                imgs[index].style.cssText="z-index:100;";
                button[index].style.cssText="background-color: red;color:white";
            },2000);
        }
        

        leftButton.onclick = function(){
            clearInterval(dingshiqi);
            index--;
            if(index < 0){
                index = imgs.length - 1;
            }
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText="background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[index].style.cssText="background-color: red;color:white";
            congqi();
        }

        rightButton.onclick = function(){
            clearInterval(dingshiqi);
            index++;
            if(index > imgs.length - 1){
                index = 0;
            }
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText="background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[index].style.cssText="background-color: red;color:white";
            congqi();
        }

        button[0].onclick = function(){
            clearInterval(dingshiqi);
            index = 0;
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText = "background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[0].style.cssText = "background-color:red;color:white";
            congqi();
        }

        button[1].onclick = function(){
            clearInterval(dingshiqi);
            index = 1;
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText = "background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[1].style.cssText = "background-color:red;color:white";
            congqi();
        }

        button[2].onclick = function(){
            clearInterval(dingshiqi);
            index = 2;
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText = "background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[2].style.cssText = "background-color:red;color:white";
            congqi();
        }

        button[3].onclick = function(){
            clearInterval(dingshiqi);
            index = 3;
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText = "background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[3].style.cssText = "background-color:red;color:white";
            congqi();
        }

        button[4].onclick = function(){
            clearInterval(dingshiqi);
            index = 4;
            for(var i = 0; i<imgs.length; i++){
                imgs[i].style.cssText = "z-index:0;";
                button[i].style.cssText = "background-color:#fff;color:#000;";
            }
            imgs[index].style.cssText = "z-index:100;"
            button[4].style.cssText = "background-color:red;color:white";
            congqi();
        }

    </script>
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">


# 总结
以上就是利用Html，css和Javascript制作简单的轮播图的面向过程方法。方法非常的简单，代码也容易理解。

泪，千殇！

关注

1
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
利用Html css和Javascript制作简单的轮播图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、轮播图是什么二、使用步骤1.首先将我们需要的页面进行简单的布局2.然后利用CSS对body内容进行定位和样式的编写3.接下来是用Javascript对事件进行绑定前言在前端的初级学习过程中，学会制作一些简单的小页面显得尤为重要，下面我们将一起学习利用Html css和Javascript如何制作一个简单的轮播图。一、轮播图是什么轮播图：在一个模块或者说窗口，通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这
复制链接

扫一扫