js--图片切换器

最新推荐文章于 2021-09-12 13:33:13 发布

Aaaaater

最新推荐文章于 2021-09-12 13:33:13 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/Aaaaater/article/details/92852317

版权

图片切换器的原理在于计时器的使用并且在图片标签添加鼠标放上事件和鼠标离开事件让图片实现滚动和暂停效果,旁边添加了li标签实现选择图片效果以及添加对应的鼠标放上事件和鼠标离开事件。
以下是图片效果以及相关js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid aquamarine;
            width:700px;
        }
        div ul{
            float: right;
        }
        ul li{
            list-style: none;
            width: 22px;
            height: 22px;
            text-align: center;
            margin-top: 2px;
            margin-right: 35px;
            border: 1px solid aqua;
        }
    </style>
    <script>
        window.onload=init;
        var i=0;
        var imgchang;
        function init() {
            var  lis=document.getElementById(0);
            lis.style.background="aqua"
           imgchang= window.setInterval("f()",1000);
        }
        function f() {
            i++;
            if (i>9) {
                i=0;
            }
            for (var j=0;j<=9;j++) {
                var lis=document.getElementById(j);
                lis.style.background="white";
            }
            var imgs=document.getElementById("imgs");
            imgs.src="images/"+i+".jpg";
            var  lis=document.getElementById(i);
            lis.style.background="aqua";
        }
        function f1() {
            window.clearInterval(imgchang);
        }
        function f2() {
            for (var j=0;j<=9;j++) {
                var lis=document.getElementById(j);
                lis.style.background="white";
            }
            var  lis=document.getElementById(i);
            lis.style.background="aqua";
            imgchang= window.setInterval("f()",1000);
        }
        function f3(n,m) {
            i=n;
            for (var j=0;j<=9;j++) {
                var lis=document.getElementById(j);
                lis.style.background="white";
            }
            var imgs=document.getElementById("imgs");
            imgs.src="images/"+n+".jpg";
            m.style.background="aqua"
            window.clearInterval(imgchang);
        }

    </script>
</head>
<body>
<div>

<img src="images/0.jpg" id="imgs" onmouseover="f1()" onmouseout="f2()">
    <ul>
        <li id="0" onmouseover="f3(0,this)" onmouseout="f2()">0</li>
        <li id="1" onmouseover="f3(1,this)" onmouseout="f2()">1</li>
        <li id="2" onmouseover="f3(2,this)" onmouseout="f2()">2</li>
        <li id="3" onmouseover="f3(3,this)" onmouseout="f2()">3</li>
        <li id="4" onmouseover="f3(4,this)" onmouseout="f2()">4</li>
        <li id="5" onmouseover="f3(5,this)" onmouseout="f2()">5</li>
        <li id="6" onmouseover="f3(6,this)" onmouseout="f2()">6</li>
        <li id="7" onmouseover="f3(7,this)" onmouseout="f2()">7</li>
        <li id="8" onmouseover="f3(8,this)" onmouseout="f2()">8</li>
        <li id="9" onmouseover="f3(9,this)" onmouseout="f2()">9</li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述