Homework SourseHTML5 JqueryJavascript I am trying to code a image slider a
HTML5 & Jquery/Javascript
I am trying to code a image slider and I\'m having a problem switching from my gif file to my images
I\'m stuck at my loading.gif and i can\'t transition. Does anyone know my problem or another way to transition from images to images
base looking at my code
My Code
<?xml version=\"1.0\" encoding=\"UTF-8\" ?>
<!DOCTYPE html>
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title> CGT 353 Project 1</title>
<style type=\"text/css\">
/* styling goes here */
body { background-color:#FFFFFF;}
div#top {width:1450px; height:200px; background-color:#000000; position:absolute; top:0px; left:0px; }
.slider { width:800px; height:350px; position:relative; overflow:hidden; margin:20px auto; top:200px; box-shadow: 0px 25px 5px -14px; background-image:url(images/loader.gif); background-repeat:no-repeat; background-position:center; }
.slider img {width:800px; position:absolute; height:350; display:none; }
</style>
<script type=\"text/javascript\" src=\"js/jquery-3.1.1.js\"></script>
<script type=\"text/javascript\" src=\"jquery.easing.1.3.js\"></script>
<script type=\"text/javascript\" src=\"jquery.cycle.all.js\"></script>
<script type=\"text/javascript\">
function Slider()
{
$(\".slider#1\").show(\"fade\", 500);
$(\".slider#1\").delay(5500).hide(\"slide\",{direction:\"left\"},500);
var sc=$(\".slider img\").size();
var count=2;
setinterval(function(){
$(\".slider#\"+count).show(\"slide\",{direction:\'right\',500});
$(\".slider#\"+count).delay(5500).hide(\"slide\",{direction:\'left\'},500);
}
if(count==sc){
count=1;
}else{
count=count+1;
}
}
}
</script>
</head>
<body onLoad=\"Slider\">
<div id=\"top\"></div>
<div class=\"slider\">
<img id=\"1\" src=\"images/1.jpg\" border=\"0\" alt=\"0\"/>
<img id=\"2\" src=\"images/2.jpg\" border=\"0\" alt=\"0\"/>
<img id=\"3\" src=\"images/3.jpg\" border=\"0\" alt=\"0\"/>
</div>
</body>
</html>
Solution
<!--Simplified code to image sliding -->
<!DOCTYPE html>
<html>
<title>Images Sliding</title>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<!--- Styele applied to display section -->
<style>
.mySlides {display:none;}
.is-content{max-width:980px;margin:auto}
.is-section{margin-top:16px!important;margin-bottom:16px!important}
.is-container{padding:0.01em 16px}
.is-container:after{content:\"\";display:table;clear:both}
</style>
<body>
<div class=\"is-container\">
<h2>Images sliding Animated</h2>
</div>
<div class=\"is-content is-section\" style=\"max-width:500px\">
<img class=\"mySlides\" src=\"1.jpg\" style=\"width:100%\">
<img class=\"mySlides\" src=\"2.jpg\" style=\"width:100%\">
<img class=\"mySlides\" src=\"3.jpg\" style=\"width:100%\">
<img class=\"mySlides\" src=\"2.jpg\" style=\"width:100%\">
</div>
<script>
var myIndex = 0;
slide(); //slide function to sliding images
function slide() {
var i;
var x = document.getElementsByClassName(\"mySlides\"); //getting all images to slide with class myslides
for (i = 0; i < x.length; i++) {
x[i].style.display = \"none\";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = \"block\";
setTimeout(slide, 1000); //time limit to display each image
}
</script>
</body>
</html>
