• How To Make Image SlideShow Using Javascript, Html And Css Tutorial

    Par mauricemuteti dans Accueil le 26 Août 2017 à 16:21

    Html Source Code

     

     <!DOCTYPE html>

    <html>

    <head>

    <title>Slider</title>

    <link rel="stylesheet" href="style.css"/>

    <link rel="stylesheet" href="fontawesome/css/font-awesome.css"/>

    <script style="text/javascript" src="javakl.js"></script>

     

    </head>

    <body>

     

    <div id="container">

     

    <p id="pic"></p>

     

     <div id="sliderdiv">

     <img src="images/Chrysanthemum.jpg" height="400px" width="900px"  id="imagethmb"/>

     

    <div id="buttons">

    <a href="#" onclick="startslide(1)" > > </a>

             <img src="images/next.png" onclick="startslide(1)" height="70px" width="70px" class="next"\/>

             <img src="images/previous.png" onclick="startslide(-1)" height="70px" width="70px" class="previous"/>

    </div>

     

     <div id="caption">

     <p id="cap">caption</p>

        </div>

           

     </div>

    </div>

    </body>

    </html>

     

     

    Javascript Source Code

     

     

    var images = [

    "images/Chrysanthemum.jpg", 

    "images/Desert.jpg", 

    "images/Hydrangeas.jpg", 

    "images/Jellyfish.jpg", 

    "images/Koala.jpg"

     ];

     

     

    var caption = [

    "caption 1", 

    "caption 2", 

    "caption 3",

    "caption 4", 

    "caption 5" 

    ];

     

     

    var imagePos = 0;

    var imagesLenth = images.length - 1;

     

    function startslide(x){

     imagePos += x;

     

     if(imagePos > imagesLenth) {

     imagePos =0;

     }

     

     if(imagePos < 0) {

     imagePos = imagesLenth;

     }

     

    document.getElementById('imagethmb').src = images[imagePos];

    document.getElementById('cap').innerHTML = caption[imagePos];

     

    }

     

     

    setInterval(function startslide(){

     imagePos ++;

     

     if(imagePos > imagesLenth) {

     imagePos =0;

     }

     

     if(imagePos < 0) {

     imagePos = imagesLenth;

     }

     

    document.getElementById('imagethmb').src = images[imagePos];

    document.getElementById('cap').innerHTML = caption[imagePos];

     

    },1000);

     

     

     

    Css

     Source Code

     

    *{

     padding: 0px;

     margin: 0px;

    }

     

    #container {

     width:900px;

     height: auto;

     margin-left: auto;

     margin-right: auto;

    }

     

    #sliderdiv {

     height: 400px;

     width: 100%;

     position:relative;

    }

     

     

    #left {

     height:80px;

     width:80px;

    }

     

     

    #buttons {

     height:100px;

     width:100%;

     position:absolute;

     top:28%;

     

    }

     

     

    .next {

     float:right;

     line-height:100px;

     }

     

    .previous {

     float:left;

     vertical-align:center;

    }

     

     

    #caption {

     height:100px;

     width:100%;

     background-color:black;

     position:absolute;

     opacity:0.5;

     bottom:0;

     color:white;

    }