JavaScript JQuery slide effect

Question

I am trying to make a background slide show effect. What i have managed to do is to make this slideshow but without any beautifully effect like sliding or other image appearing effect. Can someone help with some advice in creating the effect of sliding or any other more beautiful effects.

Here what I managed to do:

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-2.1.0.js"></script>
    <script type="text/javascript" src="function.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
        <div class='bannerbg'>
            <div class='slider'></div>
        </div>
</body>
</html>

CSS CODE

body{
    margin: 0px;
    margin-left: 0px;
}

.bannerbg{
background-size: cover;
position: relative;
height: 500px;

}

.bannerbg img{
    width: 100%;
}

.slider{
    width: 940px;
    height: 360px;
    background-color: #FFDF00;
    position: relative;
    margin: 0 auto;
    top: -370px;
}

JavaScript CODE

$(document).ready(init)

images=new Array
(
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg"
);  


function init(){
$('.bannerbg').prepend("<img id='principala' src='"+images[1]+"' />")
}

function left() // functia data schimba cu locul indexul din array la stinga cu 1 unitate
    {
        images.push(images.shift());
    }

function change(){
    p=document.querySelector("#principala");
    p.src=images[1];
}

setInterval("left(); change()",1000);

Answer 1

I slide the elements by using the animate function and by setting the css property and animation time in miliseconds for that element, like that:

jQuery( "#slid_img1" ).animate({marginLeft: 0}, 250);

It slides very nicely then. So, you could adapt your code to use the animate function to make the slide animate.

JavaScript JQuery slide effect

Question

1 answers

solution1
0 2014-02-20 06:53:54

JavaScript JQuery slide effect

Question

1 answers

solution1 0 2014-02-20 06:53:54

solution1
0 2014-02-20 06:53:54