画像をランダムの表示するJsについて

前提・実現したいこと

ランダムで５つの写真を順番にフェードインさせて表示させるプログラミングを作成したい。

発生している問題・エラーメッセージ

動作しない
HTML、CSSは正常に動作するがJsがうまく動作していない。
下記Webサイトのコードを真似したが動作しない。
http://black-flag.net/jquery/20130327-4522.html

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5	<link rel="stylesheet" href="./js/main.js">
6	<link rel="stylesheet" href="./css/index.css">
7	<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
8	<script src="http://code.jquery.com/jquery.min.js"></script>
9	
10<title>title</title>
11</head>
12
13<body>
14	<main>
15		<div id="main_background">
16			<div class="main_mes"></div>
17			<ul class="main_box">
18				<li class="main_con">
19					<img src="">
20				</li>
21				<li class="main_con">
22					<img src="">
23				</li>
24
25				<li class="main_con">
26					<img src="">
27				</li>
28
29				<li class="main_con">
30					<img src="">
31				</li>
32
33				<li class="main_con">
34					<img src="">
35				</li>
36			</ul>
37		</div>
38	</main>
39</body>
40</html>

CSS
1@charset "UTF-8";
2/* CSS Document */
3
4li{
5	list-style: none;
6}
7
8#main_background{
9	width:100%;
10	height:700px;
11	background-color:black;
12	
13}
14.main_box{
15	display:flex;
16}
17
18.main_box:after{
19	
20}
21
22.main_box li{
23	width:250px;
24	margin:25px auto;
25	height:650px;
26	border:solid 1px white;
27	background-color: gray;
28	overflosw:hidden;
29}
30
31.main_box li img{
32	display:none;
33}
34
35.main_mes{
36	width:100%;
37	height: 200px;
38	background-color:lightgreen;
39	position:fixed;
40	top:250px;
41}

js
1$(function(){
2	//set Element
3	var elm = $('#main_background img'),
4			delay = 100,
5			fade  = 500;
6	
7	$(window).load(function(){
8		randomShow();
9		function randomShow(){
10			// set length
11			var elmLength = elm.length,
12					randSet = Math.floor(Math.random()*elmLength);
13			$(elm[randSet]).css({display:'block',opacity:'0'}).animate({opacity:'1'},fade);
14			
15			//finish set up
16			if (elm > 0){
17				setTimeout(function(){randomShow();},delay);
18			}else {
19				return false;
20			}			
21		}
22	});
23});

試したこと

jqueryのソースコードの修正

補足情報（FW/ツールのバージョンなど）

Lhankor_Mhy

2020/10/17 02:47

Java は関係がないと思いますので、タグの見直しを検討してください。

Lhankor_Mhy

2020/10/17 02:48

「動作しない」とは、何が起きていますか？結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

以下のようにするとどうですか？

html
1    <link rel="stylesheet" href="./js/main.js">
2    <link rel="stylesheet" href="./css/index.css">
3    <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
4    <script src="http://code.jquery.com/jquery.min.js"></script>

↓

html
1    <link rel="stylesheet" href="./css/index.css">
2    <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
3    <script src="./js/main.js"></script>