C 知道

消息
创作中心
学不会的小王 2022-05-30 10:55 采纳率: 100%
浏览 61
已结题

js for循环图片轮播问题

js for循环图片轮播问题

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             * {
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.  
  12.             #main {
  13.                 width: 800px;
  14.                 height: 500px;
  15.                 border: 1px solid black;
  16.                 margin: 50px auto;
  17.                 text-align: center;
  18.                 padding-top: 15px;
  19.             }
  20.  
  21.             h3 {
  22.                 color: red;
  23.             }
  24.  
  25.             #main img {
  26.                 width: 600px;
  27.                 float: left;
  28.             }
  29.  
  30.             ul {
  31.                 list-style: none;
  32.                 font-size: 20px;
  33.                 font-family: 宋体;
  34.                 cursor: pointer;
  35.                 float: right;
  36.                 margin-right: 10px;
  37.  
  38.  
  39.             }
  40.  
  41.             li {
  42.                 height: 40px;
  43.                 line-height: 40px;
  44.                 border-bottom: 1px dotted black;
  45.             }
  46.  
  47.             li:hover {
  48.                 color: #ffff00;
  49.                 background: #202124;
  50.             }
  51.         </style>
  52.     </head>
  53.     <body>
  54.         <div id="main">
  55.             <h3>logo设计作品</h3>
  56.             <img id="im" src="img/logo设计/logo设计1 焦燕.jpg" />
  57.             <ul>
  58.                 <li>设计学生：焦燕</li>
  59.                 <li>设计学生：李春晓</li>
  60.                 <li>设计学生：刘嘉静</li>
  61.                 <li>设计学生：孙松</li>
  62.                 <li>设计学生：赵思琪</li>
  63.                 <li>设计学生：袁越</li>
  64.                 <li>设计学生：王萱</li>
  65.                 <li>设计学生：朱美纯</li>
  66.                 <li>设计学生：陈凡</li>
  67.             </ul>
  68.         </div>
  69.         <script type="text/javascript">
  70.             var imgs = [
  71.                 "img/logo设计/logo设计1 焦燕.jpg",
  72.                 "img/logo设计/logo设计2 李春晓.jpg",
  73.                 "img/logo设计/logo设计3 刘嘉静.jpg",
  74.                 "img/logo设计/logo设计4 孙松.jpg",
  75.                 "img/logo设计/logo设计5 赵思琪.jpg",
  76.                 "img/logo设计/logo设计6 袁越.jpg",
  77.                 "img/logo设计/logo设计7 王萱.jpg",
  78.                 "img/logo设计/logo设计8 朱美纯.jpg",
  79.                 "img/logo设计/logo设计9 陈凡.jpg"
  80.             ];
  81.             for (var i = 0; i < lis.length; i++) {
  82.                 lis.[i].onmouseover=function() {
  83.                     im.src=imgs[i];
  84.                 }
  85.             }
  86.         </script>
  87.     </body>
  88. </html>

展开全部

  • 写回答

2条回答 默认 最新

  • 你好！机器人 2022-05-30 11: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>

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    学不会的小王 2022-05-30 11:28

    为什么我上面那种不行呢

    赞
    回复
查看更多回答(1条)
编辑
预览

报告相同问题？

  • javascript图片切换综合实例（循环切换、顺序切换）
    2020-10-22 15:42
    ## JavaScript图片切换综合实例知识点 ### 标题和描述知识点 - **图片切换**：指在网页上实现图片自动或手动切换显示的效果。这通常用于产品展示、广告轮播等功能。 - **循环切换**：一种图片切换模式，其中图片...
  • JavaScript实现简单图片轮播效果
    2020-10-19 00:39
    JavaScript实现简单图片轮播效果的知识点主要包括以下方面： 1. 图片轮播基本原理：图片轮播是一种常见的网页交互效果，主要用于展示多张图片。一般通过定时器或手动触发事件来改变显示图片的位置，从而实现图片的...
  • JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
    2020-10-17 06:24
    根据给定的文件信息，可以整理出以下知识点： ...通过上述知识的详细解释，可以了解到如何利用JavaScript实现图片的顺序切换和循环切换功能，并且结合了具体的实例代码和样式设计来完成一个图片切换效果的网页。
  • 前端 - JavaScript 练习 - for 循环练习题
    2021-09-02 08:40
    一只 小网虫的博客 JavaScript for 循环练习题……
  • 图片弧形展示轮播切换js代码
    2020-06-10 18:36
    【图片弧形展示轮播切换js代码】是一个用于创建独特视觉体验的JavaScript插件，它专为网站设计，提供了一种吸引用户注意力的方式。这款特效代码使得图片以弧形排列并进行轮播切换，增加了网站的动态感和交互性。在...
  • js图片轮播手动切换特效
    2020-10-20 07:58
    在本文中，我们将探讨如何使用JavaScript实现图片轮播的手动切换特效。这种特效可以使用户在浏览图片时能够通过按钮手动控制图片的切换，从而提升用户体验。JavaScript是一种广泛应用于网页开发的脚本语言，它允许...
  • JavaScript for循环的使用
    2025-01-23 08:56
    2401_89317544的博客 【代码】JavaScript for循环的使用。
  • swiper横向循环图片
    2024-04-30 02:40
    Swiper是一款强大的JavaScript滑动插件，常用于创建响应式的触摸滑动效果，特别是在网站的轮播图、产品展示等场景。它支持多种设备，包括桌面电脑、平板和手机，且兼容各种浏览器，如Chrome、Firefox、Safari、Edge...
  • 【前端】实现图片轮播·教程
    2021-02-04 07:52
    一颗不甘坠落的流星的博客 文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 页面打开的时候，img中显示第一福图，order里面显示第一幅图的进度，info显示第一幅图的信息 初始时顺序点击播放 点击自动轮播按钮，变成循环...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 6月6日
  • 已采纳回答 5月30日
  • 创建了问题 5月30日
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区，与千万技术人共成长

专业的中文 IT 技术社区，与千万技术人共成长

关注【CSDN】视频号，行业资讯、技术分享精彩不断，直播好礼送不停！

关注【CSDN】视频号，行业资讯、技术分享精彩不断，直播好礼送不停！

 客服 返回
顶部