下面代码无法随机切换图片

代码无法运行,404found,使用了内置函数来索引数组内的对象,是写错了吗?

img

你arr是数组对象 应该是img.src=arr[opo].src .前提是 src 路径是对的。你可以找几个网络图片试试

arr = ['./img/1.jpg', ... ] 就可以了,不要src:
然后检查下,这个src是否路径正确。

  • 请看👉 :部署项目登陆后首页404解决方案
  • 除此之外, 这篇博客: 如何设计一个好看的 404 错误页面 ?中的 关于 404 错误页面的不同看法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 大体上,有 2 种 404 错误页面的设计方式。

    一种是简约素款。这种基本上没有什么内容的设计方式能够非常直观地传达出相关信息:这个页面出现了错误,除了给你一个返回到主页的链接,基本上就没有其它多余的元素了。谷歌的 404 错误页面就是这种典型设计。
    在这里插入图片描述

    然而,我并不认同这种设计方式。在我看来,404 错误页面至少应该告知用户,即便用户没有得到其想要的内容,也并不会有太大的影响。所有的错误页面,至少不应该让用户的内心感到不快,并且通过一些有趣的元素转移用户的注意力。因此,404 错误页面值得用心投资,从而设计出让用户觉得标新立异、记忆犹新的错误页面。总之,你要记住的是,404 错误页面其实也是一种着陆页。

  • 以下回答由chatgpt基于相关博客总结生成:

    首先,如果代码出现了404错误提示,那么很有可能是请求的资源不存在,需要检查一下图片资源的路径是否正确,是否正确加载了到相应的路径。

    如果确定资源路径正确,那么可能是跨域问题导致的,需要设置相应的CORS跨域请求头或者使用JSONP跨域传输数据。

    除此之外,参考资料中提供了一些缺点,单页应用可能导致导航不可用和SEO不友好。因此,在实现随机切换图片的过程中,可以考虑采用预加载的方式,即提前加载下一张或几张图片,以避免出现跨域问题和页面跳转问题。同时,为了更好地优化SEO,可以考虑将图片的相关信息展现在HTML文档中,并在meta标签里设置相关属性,以提升搜索引擎对网站的收录和排名。

    关于数组随机排序的问题,参考资料中提供了三种方法,可以根据实际需要选择适合的方式实现。其中,方法一和方法二都利用了Math.random()函数来实现随机排序,方法三则利用了sort()函数的排序特性实现了随机排序。以下是方法一的完整代码实现:

    var arr = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg", "img5.jpg", "img6.jpg"];
    function randSort1(arr){                               
        for(var i = 0,len = arr.length;i < len; i++ ){     
            var rand = parseInt(Math.random()*len);        
            var temp = arr[rand];                          
            arr[rand] = arr[i];                            
            arr[i] = temp;                                 
        }                                                  
        return arr;                                        
    }                                                      
    console.log(randSort1(arr)); 
    

    其中的arr数组中的元素为图片的路径,通过调用randSort1()函数来实现随机排序,并返回新的随机排序后的数组。在HTML中可以通过遍历这个数组,来动态加载不同的图片资源。