I have been working on creating a background slide show effect, but so far, I've only managed to make a basic slideshow without any attractive transition effects like sliding or fading. Can anyone provide advice on how to add these more visually appealing effects?
Here is the code I currently have:
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() // This function shifts the array index one place to the left
{
images.push(images.shift());
}
function change(){
p=document.querySelector("#principala");
p.src=images[1];
}
setInterval("left(); change()",1000);