学不会的小王 2022-05-30 18:55 采纳率: 100%
浏览 58
已结题

js for循环图片轮播问题

js for循环图片轮播问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #main {
                width: 800px;
                height: 500px;
                border: 1px solid black;
                margin: 50px auto;
                text-align: center;
                padding-top: 15px;
            }

            h3 {
                color: red;
            }

            #main img {
                width: 600px;
                float: left;
            }

            ul {
                list-style: none;
                font-size: 20px;
                font-family: 宋体;
                cursor: pointer;
                float: right;
                margin-right: 10px;


            }

            li {
                height: 40px;
                line-height: 40px;
                border-bottom: 1px dotted black;
            }

            li:hover {
                color: #ffff00;
                background: #202124;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <h3>logo设计作品</h3>
            <img id="im" src="img/logo设计/logo设计1 焦燕.jpg" />
            <ul>
                <li>设计学生:焦燕</li>
                <li>设计学生:李春晓</li>
                <li>设计学生:刘嘉静</li>
                <li>设计学生:孙松</li>
                <li>设计学生:赵思琪</li>
                <li>设计学生:袁越</li>
                <li>设计学生:王萱</li>
                <li>设计学生:朱美纯</li>
                <li>设计学生:陈凡</li>
            </ul>
        </div>
        <script type="text/javascript">
            var imgs = [
                "img/logo设计/logo设计1 焦燕.jpg",
                "img/logo设计/logo设计2 李春晓.jpg",
                "img/logo设计/logo设计3 刘嘉静.jpg",
                "img/logo设计/logo设计4 孙松.jpg",
                "img/logo设计/logo设计5 赵思琪.jpg",
                "img/logo设计/logo设计6 袁越.jpg",
                "img/logo设计/logo设计7 王萱.jpg",
                "img/logo设计/logo设计8 朱美纯.jpg",
                "img/logo设计/logo设计9 陈凡.jpg"
            ];
            for (var i = 0; i < lis.length; i++) {
                lis.[i].onmouseover=function() {
                    im.src=imgs[i];
                }
            }
        </script>
    </body>
</html>
  • 写回答

2条回答 默认 最新

  • 你好!机器人 2022-05-30 19:10
    关注
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
     
                #main {
                    width: 800px;
                    height: 500px;
                    border: 1px solid black;
                    margin: 50px auto;
                    text-align: center;
                    padding-top: 15px;
                }
     
                h3 {
                    color: red;
                }
     
                #main img {
                    width: 600px;
                    float: left;
                }
     
                ul {
                    list-style: none;
                    font-size: 20px;
                    font-family: 宋体;
                    cursor: pointer;
                    float: right;
                    margin-right: 10px;
     
     
                }
     
                li {
                    height: 40px;
                    line-height: 40px;
                    border-bottom: 1px dotted black;
                }
     
                li:hover {
                    color: #ffff00;
                    background: #202124;
                }
            </style>
        </head>
        <body>
            <div id="main">
                <h3>logo设计作品</h3>
                <img id="im" src="img/logo设计/logo设计1 焦燕.jpg" />
                <ul>
                    <li>设计学生:焦燕</li>
                    <li>设计学生:李春晓</li>
                    <li>设计学生:刘嘉静</li>
                    <li>设计学生:孙松</li>
                    <li>设计学生:赵思琪</li>
                    <li>设计学生:袁越</li>
                    <li>设计学生:王萱</li>
                    <li>设计学生:朱美纯</li>
                    <li>设计学生:陈凡</li>
                </ul>
            </div>
            <script type="text/javascript">
                var imgs = [
                    "img/logo设计/logo设计1 焦燕.jpg",
                    "img/logo设计/logo设计2 李春晓.jpg",
                    "img/logo设计/logo设计3 刘嘉静.jpg",
                    "img/logo设计/logo设计4 孙松.jpg",
                    "img/logo设计/logo设计5 赵思琪.jpg",
                    "img/logo设计/logo设计6 袁越.jpg",
                    "img/logo设计/logo设计7 王萱.jpg",
                    "img/logo设计/logo设计8 朱美纯.jpg",
                    "img/logo设计/logo设计9 陈凡.jpg"
                ];
                var lis = document.querySelectorAll('li')
                for (var i = 0; i < lis.length; i++) {
                    lis[i].index = i;
                    lis[i].onmouseover=function() {
                        index = this.index;
                        im.src=imgs[this.index];
                    }
                }
            </script>
        </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 6月7日
  • 已采纳回答 5月30日
  • 创建了问题 5月30日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题