js--图片切换器

关注

原创最新推荐文章于 2026-03-16 14:43:35 发布 238 阅读 AI 写同款· GEO 优化 ›

全功能智能图片轮播器——支持多格式导入/自定义尺寸/顺序控制/响应式布局的专业级可视化播放系统这里提供一个优化后的可执行轮播方案，支持文件选择、自定义尺寸和播放控制等功能：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高级图片轮播器</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #c 阅读详情

图片切换器的原理在于计时器的使用并且在图片标签添加鼠标放上事件和鼠标离开事件让图片实现滚动和暂停效果,旁边添加了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>

在这里插入图片描述