weixin_63967673 2022-09-08 21:22 采纳率: 94.1%
浏览 31
已结题

用js轮播图片动不了

问题遇到的现象和发生背景

用js轮播图片动不了

问题相关代码，请勿粘贴截图

.xuzhiimg{
    margin-top: 44px;
}
.imgage{
    width: 1145px;
    height: 500px;
    border: 2px solid #999;
    overflow: hidden;
}
.imglist{
    width: 4580px; 
    height: 500px;
    margin: 0 ;
    padding: 0 ;
    text-decoration:none;
    list-style:none;
}
.imglist img{
    width: 1145px;
    height: 500px;
}
.imglist li{
    float: left;
}

 <div style="width:1536px; height:700px; background-color: rgb(223, 223, 223); " class="imglunbo" >
        <div class="xuzhicenter">
            <h1>用户使用须知</h1>
            <h3>在创作之前需要您有Web编程基础</h3>
        </div>
        <div class="xuzhiimg">
        <div class="imgage">
            <ul class="imglist">
                <li><img src="D:\Web3.0开发\images\home\pic1.JPG" alt=""></li>
                <li><img src="D:\Web3.0开发\images\home\pic2.JPG" alt=""></li>
                <li><img src="D:\Web3.0开发\images\home\pic3.JPG" alt=""></li>
                <li><img src="D:\Web3.0开发\images\home\pic1.JPG" alt=""></li>
            </ul>
        </div>
        </div>
    </div>
    <script> 
        var left = 0;
        var timer;
        run()
        function run(){
            if(left <= -3200){
               left = 0;
            }
            imglist.style.marginLeft = left + 'px';
            var n = (left % 1145 == 0 ) ? n = 1200 : n = 10;
            left -= 10;
            timer = setTimeout(run, n);
        }  
    </script>
  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-09-09 09:22
    关注

    你都没获取 imglist的dom 需要获取一下。 不然有报错

    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .xuzhiimg {
            margin-top: 44px;
        }

        .imgage {
            width: 1145px;
            height: 500px;
            border: 2px solid #999;
            overflow: hidden;
        }

        .imglist {
            width: 4580px;
            height: 500px;
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

        .imglist img {
            width: 1145px;
            height: 500px;
        }

        .imglist li {
            float: left;
        }
    </style>
</head>

<body>



    <div style="width:1536px; height:700px; background-color: rgb(223, 223, 223); " class="imglunbo">
        <div class="xuzhicenter">
            <h1>用户使用须知</h1>
            <h3>在创作之前需要您有Web编程基础</h3>
        </div>
        <div class="xuzhiimg">
            <div class="imgage">
                <ul class="imglist">
                    <li><img src="D:\Web3.0开发\images\home\pic1.JPG" alt=""></li>
                    <li><img src="D:\Web3.0开发\images\home\pic2.JPG" alt=""></li>
                    <li><img src="D:\Web3.0开发\images\home\pic3.JPG" alt=""></li>
                    <li><img src="D:\Web3.0开发\images\home\pic1.JPG" alt=""></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        var left = 0;
        var timer;
        run()
        function run() {
            if (left <= -3200) {
                left = 0;
            }
            let imglist=document.getElementsByClassName("imglist")[0];
            imglist.style.marginLeft = left + 'px';
            var n = (left % 1145 == 0) ? n = 1200 : n = 10;
            left -= 10;
            timer = setTimeout(run, n);
        }  
    </script>

</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • js图片轮播
    2017-10-12 14:44
    首先，我们需要理解JavaScript的基础知识，它是一种轻量级的解释型编程语言，主要用于客户端的网页交互。在创建图片轮播时，我们会用到以下JavaScript核心概念： 1. **DOM（Document Object Model）**：JavaScript...
  • 原生JS实现图片左右轮播
    2020-11-27 08:27
    标题中的“原生JS实现图片左右轮播”指的是使用JavaScript编程语言来创建一个图片自动循环左右移动的效果，这种效果类似于常见的轮播图，但不是基于现成的轮播库，而是利用JavaScript的基本语法和DOM操作自行实现。...
  • 原生js实现图片轮播特效
    2020-10-23 03:06
    1. 使用原生JavaScript编程语言来创建图片轮播功能。 2. 利用JavaScript操作DOM元素，对图片进行动态控制。 3. 实现一个简单的广告轮播效果，适用于商品展示或广告展示。 4. 通过JavaScript实现图片的自动切换以及...
  • js图片轮播代码JavaScript
    2023-04-14 19:45
    JavaScript是一种广泛应用于网页和网络应用的编程语言，尤其在创建动态和交互式用户界面方面具有强大的功能。在本文中，我们将深入探讨如何使用JavaScript实现图片轮播效果，这是网页设计中常见的一种功能，用于展示...
  • js弧形展示图片轮播切换代码.zip
    2019-07-11 09:19
    【标签】“js特效-js弧形展示图片轮播切换代码”进一步明确了这个代码库的特性，即使用JavaScript编程语言实现的特效功能，主要针对网页中的图片展示进行优化。JavaScript是一种广泛用于网页动态效果的客户端脚本...
  • js实现支持手机滑动切换的轮播图片效果实例
    2020-10-24 07:36
    JavaScript 是实现这种效果的一种常用语言，而在这个实例中，我们将探讨如何使用 JavaScript 来实现一个支持手机滑动切换的轮播图片效果。 首先，要理解这个实例的核心原理，主要是通过监听用户的滑动手势，来控制...
  • 很棒的一组js图片轮播特效
    2020-10-20 15:37
    总的来说，本文的内容为我们提供了一个简单的图片轮播特效实现案例，不仅包含了视觉上的轮播效果，还包括了背后的实现逻辑和编程技术。通过这个实例，开发者可以进一步学习和探索前端开发中常见的轮播特效以及对应的...
  • JavaScript案例-js轮播图
    2023-02-16 09:34
    JavaScript是一种广泛应用于网页和网络应用的编程语言，尤其在创建动态和交互式用户界面方面表现突出。在这个"JavaScript案例-js轮播图"中，我们将深入探讨如何使用纯JavaScript实现一个功能完善的轮播图效果。 ...
  • JS实现图片轮播（源码）.zip
    2020-05-27 16:54
    在本项目"JS实现图片轮播（源码）"中，我们将深入探讨如何利用JavaScript来创建一个功能完善的图片轮播效果。这个轮播图具备自动循环播放、上一张、下一张切换以及底部导航选择等功能，是学习JavaScript动态效果实现...
  • js立体图片轮播特效
    2019-11-17 12:10
    总之，"js立体图片轮播特效"涉及到JavaScript编程、CSS3样式和DOM操作等多个方面的知识。通过巧妙地结合这些技术，我们可以创建出具有立体感和交互性的图片轮播组件，提升网站的用户体验。在实际开发过程中，需要...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 9月17日
  • 已采纳回答 9月9日
  • 创建了问题 9月8日