HTML5 & Jquery/Javascript I am trying to code a image slider and I\'m having a p
ID: 3935907 • Letter: H
Question
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>
<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>
Explanation / Answer
<!--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">
<img class="mySlides" src="1.jpg">
<img class="mySlides" src="2.jpg">
<img class="mySlides" src="3.jpg">
<img class="mySlides" src="2.jpg">
</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>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.