I am trying to write a code to make a slideshow. I used html and jquery to do it, but it's not working. Here's the code I came up with:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<title> The Justice League of America </title>
<style>
#slideshow {
width: 900px;
height: 304px;
margin: 10px auto 0 auto;
}
#slideshow .Wrapper-slideshow {
width: 900px;
height: 304px;
float: left;
}
#slideshow .Content-slideshow {
height: 304px;
}
#Nav-slideshow {
width: 600px;
height: 30px;
margin: -30px 0 0 10px;
}
#Nav-slideshow a {
width: 10px;
height: 10px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
color: #666;
background: #666;
border: 1px solid #ccc;
display: block;
margin: 0 10px;
float: left;
}
#Nav-slideshow a.activeSlide{
background: #222;
border: 3px solid #eee;
-moz-border-radius: 8px;
margin: -2px 8px;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j("#Content-slideshow").cycle({
fx: 'fade',
pager: '#Nav-slideshow'
});
});
</script>
</head>
<body>
<div id="slideshow">
<div class="Wrapper-slideshow">
<div id="Content-slideshow" class="Content-slideshow">
<div class="featureItem"><a href=""><img src="http://cdn.bleedingcool.net/wp-content/uploads/2011/03/justice-league-logo.jpg" title="Justice League"
alt="Justice League Logo" /></a></div>
<div class="featureItem"><a href=""><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTd8_Ht69tA0Pmv5CHSJU2WEhX6xonffl3AZFNnvZI0YGbj5tiT" title="Batman"
alt="Bruce Wayne" /></a></div>
<div class="featureItem"><a href=""><img src="https://dailypop.files.wordpress.com/2012/03/justice-league-doom-superman.jpg" title="Superman"
alt="Clark Kent" /></a></div>
<div class="featureItem"><a href=""><img src="http://vignette3.wikia.nocookie.net/dcanimated/images/f/f5/Wonder_Woman.png/revision/latest?cb=20090407084402"
title="Wonder Woman" alt="Princess Diana of Themyscira/Diana Prince" /></a></div>
<div class="featureItem"><a href=""><img src="http://statici.behindthevoiceactors.com/behindthevoiceactors/_img/chars/char_101.jpg" title="Martian Manhunter" alt="J'onn
J'onzz/John Jones" /></a></div>
<div class="featureItem"><a href=""><img src="http://vignette2.wikia.nocookie.net/dcanimated/images/7/7b/Hal_Jordan.png/revision/latest?cb=20080930201433" title="Green
Lantern" alt="Hal Jordan" /></a></div>
<div class="featureItem"><a href=""><img src="http://vignette1.wikia.nocookie.net/dcmovies/images/0/06/Flash_Justice_League9.jpg/revision/latest?cb=20110917201653"
title="The Flash" alt="Barry Allen" /></a></div>
<div class="featureItem"><a href=""><img src="http://ifanboy.com/wp-content/uploads/2011/07/JL_TheEnemyBelow.jpg" title="Aquaman" alt="King
Orin/King of the Seven Seas" /></a></div>
<div class="featureItem"><a href=""><img src="http://vignette3.wikia.nocookie.net/dcanimated/images/f/f2/Hawkgirl.png/revision/latest?cb=20100117155542" title="Hawkgirl"
alt="Shayera Hol" /></a></div>
</div>
<div id="Nav-slideshow"></div>
</div>
</div>
<script type='text/javascript' src='cycle.js'></script>
</body>
</html>
Also this code is linked to another javascript file called jquery.js (you will see they are linked in the above code). I can provide the code for that if you need it to help me.
I've been trying to make a slideshow for days, I just want it to work. Thank you in advance to anyone who can help me.
Quick note: I am not a programmer and I don't understand any languages except for html, so when you answer, don't use programming terms. I won't understand them! That's probably why I am having so much trouble!