i need some help to add code for a slideshow on a website using javascript and/or css. I want to make the image load smoother if possible. This is my first website i tried to code and i dont get how to add the fade in / out feature to this code.
Here is my code:
jquery
CSS
HTML
This is my first website and i am not able to get this working
Thanks for any help
Here is my code:
jquery
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var coverImage=new Array()
coverImage[0]="images/covers/image1.jpg"
coverImage[1]="images/covers/image2.jpg"
coverImage[2]="images/covers/image3.jpg"
coverImage[3]="images/covers/image4.jpg"
coverImage[4]="images/covers/image5.jpg"
coverImage[5]="images/covers/image6.jpg"
coverImage[6]="images/covers/image7.jpg"
coverImage[7]="images/covers/image8.jpg"
coverImage[8]="images/covers/image9.jpg"
coverImage[9]="images/covers/image10.jpg"
coverImage[10]="images/covers/image11.jpg"
coverImage[11]="images/covers/image12.jpg"
coverImage[12]="images/covers/image13.jpg"
coverImage[13]="images/covers/image14.jpg"
coverImage[14]="images/covers/image15.jpg"
coverImage[15]="images/covers/image16.jpg"
coverImage[16]="images/covers/image17.jpg"
coverImage[17]="images/covers/image18.jpg"
coverImage[18]="images/covers/image19.jpg"
coverImage[19]="images/covers/image20.jpg"
coverImage[20]="images/covers/image21.jpg"
coverImage[21]="images/covers/image22.jpg"
coverImage[22]="images/covers/image23.jpg"
coverImage[23]="images/covers/image24.jpg"
coverImage[24]="images/covers/image25.jpg"
coverImage[25]="images/covers/image26.jpg"
coverImage[26]="images/covers/image27.jpg"
coverImage[27]="images/covers/image28.jpg"
coverImage[28]="images/covers/image29.jpg"
coverImage[29]="images/covers/image30.jpg"
coverImage[30]="images/covers/image31.jpg"
coverImage[31]="images/covers/image32.jpg"
coverImage[32]="images/covers/image33.jpg"
coverImage[33]="images/covers/image34.jpg"
coverImage[34]="images/covers/image35.jpg"
coverImage[35]="images/covers/image36.jpg"
coverImage[36]="images/covers/image37.jpg"
coverImage[37]="images/covers/image38.jpg"
coverImage[38]="images/covers/image39.jpg"
coverImage[39]="images/covers/image40.jpg"
coverImage[40]="images/covers/image41.jpg"
coverImage[41]="images/covers/image42.jpg"
coverImage[42]="images/covers/image43.jpg"
coverImage[43]="images/covers/image44.jpg"
coverImage[44]="images/covers/image45.jpg"
coverImage[45]="images/covers/image46.jpg"
//feature preloading images
var processing=new Array()
for (i=0;i<coverImage.length;i++){
processing[i]=new Image()
processing[i].srd=coverImage[i]
}
var slide=-1
var divID = 'login'; // determine used DIV
function time(){
if (slide<coverImage.length-1)
slide++
else
slide=0
document.getElementById(divID).background=processing[Math.floor(Math.random()*coverImage.length)].srd
//document.getElementById(divID).style.background = 'url("'+coverImage[slide]+'")';
document.getElementById(divID).style.background = 'url("'+ coverImage[Math.floor(Math.random()*coverImage.length)]+'")';
document.getElementById(divID).style.backgroundSize = "cover";
document.getElementById(divID).className = "img-responsive";
}
window.onload = load;
function load()
{
setInterval("time()",5000); //change every 5 seconds.
}
</script>CSS
Code:
<style>
body {
font-size: 14px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
#login {
background-image: url("images/covers/image0.jpg");
background-position: center;
background-size: cover;
height: 100vh;
}
@media (max-width: 1350px) {
#scroller {
visibility:hidden;
}
}
</style>HTML
Code:
<div id="login">
<div style="background-image: linear-gradient(to bottom, transparent 0%, black 100%);height: 100vh;">
<div class="main-header text-center">
<div class="elements">
<div class="logo page-header">
<img style="padding-top: 5%;" src="images/logo-header.png" alt="STREAMNET" width="1200" class="img-responsive">
</div>
<div>
<p style="background-color:#00000099; margin:0px 25% 0px 25%; padding:5px 5px;">The Future of <span>streaming </span>has landed.... Netflix was yesterday...</p>
<br/>
<br/>
<div style="padding-top:2%;">
<form method="post" class="navbar-form" role="form">
<div class="form-group">
<input id="email" name="PlexEmail" type="text" placeholder="Plex Email" autofocus required class="form-control">
</div>
<div style="padding-top:0.9%;" class="form-group">
<input id="password" name="PlexPassword" type="password" placeholder="Plex Password" required class="form-control">
<div style="font-size:10px;" class="text-right"><a href="" data-toggle="modal" data-target="#pass">Forget the password ?</a></div>
</div>
<div style="padding-left: 10px" class="checkbox c-checkbox">
<label>
<input type="checkbox" id="indeterminate-checkbox" name="rememberme" value="true" checked>
<span class="fa fa-check"></span>Remember Me
</label>
</div>
<button type="submit" name="action" class="btn btn-primary"><i class="fa fa-sign-in" aria-hidden="true"></i> Log in</button>
</form>
</div>
<br/><br/>
<div style="background-color:#00000099; margin:0px 40% 0px 40%; padding:5px 5px;" class="text-gamboge">Don't have an Account yet ?</div>
<br/>
<a type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary"><i class="fa fa-user-plus" aria-hidden="true"></i> Sign up</a>
</div>
</div>This is my first website and i am not able to get this working
Thanks for any help