代码亮点：增加图片时，你只需要再加一个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>

版权属于：乐心湖's Blog

本文链接：https://xn2001.com/archives/402.html

声明：博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！

Last modification：August 11, 2020
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏