changing the z-index property

[karthick_doosra]

Actually i’m working on a slider.I have 3 pics that slide.Only the 3 pic which is on top of the other two is visible.i’ll paste the code below

html file

css
#container{
position: relative;
width:150px;
overflow: hidden;
height:150px;
}

#pic1,#pic3,#pic2{
position: absolute;
top: 0px;
left: 0px;
height:150px;
width:150px;
z-index:0;

}

js file

//function passes the pics one by one at an interval of 3 seconds ,
//which is approx time a pic that is already passed takes to slide away

var slidePic = function(){
var pics = [document.getElementById(“pic1”),document.getElementById(“pic2”),document. getElementById(“pic3”)];
console.log(pics[0].style.left);
var i =0;
var int = setInterval(function(){
while(i < 3){
if(i===0)console.log(“hi”);
slide(pics);
i++;
}
},3000);
}
//function to slide an element that is passed on to it
var slide = function(picture){

‘use strict’;

var pixel = 1;

var interval = setInterval(function(){
if(picture.style.left != ‘150px’){
var left = parseInt(picture.style.left);
console.log(left);
var totalPos = left + 1;
//pic.style.left = totalPos.toString() + ‘px’ ;
if(picture.style.zIndex){
console.log(“yeah”);
}
picture.style.left = pixel.toString() + ‘px’;
}

pixel += 1;

if(picture.style.left == ‘150px’){
picture.style.left = ‘-150px’;

console.log(picture.style.left);
pixel = -150;
clearInterval(interval);
}
},16.66);

}

window.onload = slidePic;

[Author]

Posts