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

￡神魔★判官ぃ 2022-12-22 09:15 42阅读 0赞

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

### 文章目录 ###

*  前言
 *  一、轮播图是什么
 *  二、使用步骤
 *   *  1.首先将我们需要的页面进行简单的布局
     *  2.然后利用CSS对body内容进行定位和样式的编写
     *  3.接下来是用Javascript对事件进行绑定

--------------------

# 前言 #

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

# 一、轮播图是什么 #

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

# 二、使用步骤 #

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

代码如下：

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

代码如下：

## 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部分代码进行合并**

代码如下：