MENU

作业-原生js完成轮播图与悬停

March 19, 2020 • Read: 81 • Note,JavaScript

代码亮点:增加图片时,你只需要再加一个li就可以了。不需要改动其他任何代码。

完整代码直接看文章结尾!

首先我们看一下需求

用到的东西有定时器,列表标签,定位,悬停在列表时停止定时器。

这里我们先让他展示出一张图片即可,为了方便,我们直接把图片名字改为1到5 +后缀的形式,比如1.jpg,2.jpg … 并且放在与html同级,便于我们观看。

html

<img src="1.jpg" id="img" />

我们把列表也加上吧

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

css

我们简单加入css,让效果看起来很美观一些,这里不会讲css,我自己也是瞎折腾的。

        li {
                height: 28px;
                width: 28px;
                border: 1px solid #68aa44;
                line-height: 28px;
                font-size: 14px;
                text-align: center;
                margin-right: 20px;
                border-radius: 15px;
                float: left;
                cursor: pointer;
                list-style-type: none;
            }
        
        img {
                height: 600px;
            }

稍微好看了一些了,我们就凑合用。

下面我们进入js实现功能的环节。

js

我们先简单构思一下如何让图片自动轮播

假设我们现在有一个定时器,我们传入一个功能,他可以自动切换图片的名称。

那么就是一个简单的将1改变为2的过程并循环,我们如何去判断这个循环的次数呢,这里有很多种思路。

为了效果一致且方便维护,我将列表的长度作为我图片的数量即可。

下面我们先将图片和列表在js中获取,

var lis = document.getElementsByTagName("li");
var img = document.getElementById("img");
console.log(lis.length)

我们可以看到获取了长度是五的数组,正对应5个li标签

我们定义一个函数,实现图片的自动更换。

            var i = 1;
            function chose(){
                if (i <= lis.length) {
                    img.src = i + '.jpg';
                    i++;
                }else{
                    i=0;
                }
            }

我们定义一个定时器,传入已经写好的功能,设置为800ms.并且存放到一个变量中去(myChose),方便后面停止.

var myChose = window.setInterval("chose()",800);

访问浏览器时,我们就可以看到图片在循环切换啦.

怎么让它悬停在列表12345的时候停止呢,很简单,我们在列表中绑定一个函数,让它停止即可,这里为了代码简洁,我们直接集成到chose函数中即可.

当有参数传进来的时候,直接切换到这个参数的图片,然后停止定时器.

                if (li) {
                    i = li;
                    window.clearInterval(myChose);
                }

此时js的完整代码为

            function chose(li){
                if (li) {
                    i = li;
                    window.clearInterval(myChose);
                }
                if (i < lis.length) {
                    img.src = i + '.jpg';
                    i++;
                }else{
                    i=0;
                }
            }

html

            <li onmouseover="chose(1)">1</li>
            <li onmouseover="chose(2)">2</li>
            <li onmouseover="chose(3)">3</li>
            <li onmouseover="chose(4)">4</li>
            <li onmouseover="chose(5)">5</li>

到这里需求就基本实现了。

额外补充:

我们可以增加一个小功能,当图片切换时列表数字高亮,

我们先定义两个css,一个用于图片展示时高亮,一个用于回退效果。

            .out {}
            
            .over {
                //设置数字的样式,当鼠标停在数字上时,给数字加点背景色和字体颜色.
                background-color: red;
                color: red;
            }

如何让数字高亮呢,这很简单,只要在改变图片的图示让数字定位到这个css中的over即可。但是就有一个难题了,如何让它回退呢,也很简单,但是很多人想不到,让我们定时器第二次调用函数的时候判断i是否为1,不为1说明上一次变过色,我们让它回去css中的out即可。

                if(i!=1){
                    lis[i-2].className = "cout";
                }

此时js的完整代码为

        <script type="text/javascript">
            var lis = document.getElementsByTagName("li");
            var img = document.getElementById("img");
            console.log(lis.length);
            var myChose = window.setInterval("chose()", 800);
            var i = 1;
            function chose(li) {
                if(i!=1){
                    lis[i-2].className = "cout";
                }
                if (li) {
                    i = li;
                    window.clearInterval(myChose);
                }
                if (i <= lis.length) {
                    console.log(i)
                    img.src = i + '.jpg';
                    lis[i - 1].className = "cover";
                    i++;
                } else {
                    i = 1;
                }
            }
        </script>

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            li {
                height: 28px;
                width: 28px;
                border: 1px solid #68aa44;
                line-height: 28px;
                font-size: 14px;
                text-align: center;
                margin-right: 20px;
                border-radius: 15px;
                float: left;
                cursor: pointer;
                list-style-type: none;
            }

            img {
                height: 600px;
            }

            .cout {}

            .cover {
                //设置数字的样式,当鼠标停在数字上时,给数字加点背景色和字体颜色.
                background-color: red;
                color: red;
            }
        </style>
    </head>
    <body>
        <img src="1.jpg" id="img" />
        <ul>
            <li onmouseover="chose(1)">1</li>
            <li onmouseover="chose(2)">2</li>
            <li onmouseover="chose(3)">3</li>
            <li onmouseover="chose(4)">4</li>
            <li onmouseover="chose(5)">5</li>
        </ul>

        <script type="text/javascript">
            var lis = document.getElementsByTagName("li");
            var img = document.getElementById("img");
            console.log(lis.length);
            var myChose = window.setInterval("chose()", 800);
            var i = 1;
            function chose(li) {
                if(i!=1){
                    lis[i-2].className = "cout";
                }
                if (li) {
                    i = li;
                    window.clearInterval(myChose);
                }
                if (i <= lis.length) {
                    console.log(i)
                    img.src = i + '.jpg';
                    lis[i - 1].className = "cover";
                    i++;
                } else {
                    i = 1;
                }
            }
        </script>
    </body>
</html>

本站所有未注明转载的文章均为原创,并采用CC BY-NV-SA 4.0 授权协议,转载请注明来源。

Last Modified: March 23, 2020
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment