So I have this slider that works , it works but the images simply change , they just instantly change. I want to make it so that they Slide one after another... problem is I think this code isnt compatible with it and I might have to rewrite some stuff. Here is the HTML and the CSS and the Javascript
<!doctype html>
<html>
<head>
<style type="text/css">
#container {
height: 200px;
width: 800px;
margin: 20px auto;
position: relative;
}
#img {
width: 800px;
height: 200px;
position: absolute;
}
.img1 {
top: 40%;
width: 20px;
height: 20px;
position: absolute;
}
#left {
height: 200px;
width: 100px;
left: -22px;
top: 0px;
position:absolute;
}
#right {
text-align: right;
height: 200px;
width: 100px;
right: 0px;
top: 0px;
position:absolute;
}
</style>
<script type="text/javascript">
var imagecount = 1;
var total = 3;
function slide(x) {
var image = document.getElementById('img');
imagecount = imagecount + x;
if(imagecount > total) {imagecount = 1;}
if(imagecount < 1) {imagecount = total;}
image.src = "slider/web-design-header"+ imagecount +".png";
}
window.setInterval(function slideA() {
var image = document.getElementById('img');
imagecount = imagecount + 1;
if(imagecount > total) {imagecount = 1;}
if(imagecount < 1) {imagecount = total;}
image.src = "slider/web-design-header"+ imagecount +".png";
},5000);
</script>
</head>
<body onLoad="slideA()">
<div id="container">
<img id="img" src="slider/web-design-header1.png"/>
<div id="left"> <img onClick="slide(-1)" class="img1" src="slider/left.png" /></div>
<div id="right"><img onClick="slide(1)" class="img1" src="slider/right.png" /></div>
</div>
</body>
</html>
The way this works is on click it loads the next image in the sequence. My concern is : since I only have 1 image in the HTML's div I think this could be an issue as it simply LOADS new images , it doesnt cycle thru already defined images. This is why I need some advice. Is there a way to make it SLIDE the images or do I have to rewrite this thing (basically wrote that down from a youtube video about sliders , im new to webdesign and js is my weakness)
Aucun commentaire:
Enregistrer un commentaire