神刀安全网

Basic Image Slideshow With Previous And Next Button Using jQuery

Tags:-jQuery HTML CSS

Image Slideshow is the best way to display multiple images without getting much space in your webpage.You can display as many images you want only with the space of single image. In this tutorial we will teach you how to build your own basic Image SlideShow with the help of jQuery.

See Demo

Basic Image Slideshow With Previous And Next Button Using jQuery

To Make Basic Image SlideShow With Previous and Next Button It Takes Only Three Steps:-

  1. Make a HTML file and define markups for Image SlideShow
  2. Make a CSS file and define styling for Image SlideShow
  3. Make a Script file and define Effects for Image SlideShow

Step 1.Make a HTML file and define markups for Image SlideShow

We make a HTML file and save it with a name slideshow.html

<html>    <head>      <link rel="stylesheet" type="text/css" href="slideshow_style.css">      <script type="text/javascript" src="jquery.js"></script>      <script type="text/javascript" src="slideshow_effect.js"></script>    </head>        <body>       <center>                    <div id="slide_cont">             <img src="images/image1.jpg" id="slideshow_image">         </div>         <input type="image" id="prev_image" src="images/previous.png" >         <input type="image" id="next_image" src="images/next.png" >         <input type="hidden" id="img_no" value="0">       </center>      </body> </html>

Step 2.Make a CSS file and define styling for Image SlideShow

Now we define styling for our Image SlideShow and save the file named slideshow_style.css

#slide_cont {    box-shadow:0px 0px 10px 0px silver;    width:600px;    height:400px;    margin-top:100px; } #slideshow_image {    width:600px;    height:400px; } #prev_image,#next_image {    width:40px;    height:40px; }

Step 3.Make a Script file and define Effects for Image SlideShow

In this we define effects for our SlideShow using jQuery and save it with a name slideshow_effect.js . You can dowload jQuery from this Site

$(document).ready(function(){      $( "#prev_image" ).click(function(){        prev();     });     $( "#next_image" ).click(function(){        next();     });      });  // Write all the names of images in slideshow var images = [ "image1" , "image2" , "image3" , "image4" ];  function prev() {    $( '#slideshow_image' ).fadeOut(300,function()    {        var prev_val = document.getElementById( "img_no" ).value;        var prev_val = Number(prev_val) - 1;        if(prev_val< = -1)        {           prev_val = images.length - 1;        }        $( '#slideshow_image' ).attr( 'src' , 'images/'+images[prev_val]+'.jpg' );        document.getElementById( "img_no" ).value = prev_val;    });    $( '#slideshow_image' ).fadeIn(1000); }  function next() {     $( '#slideshow_image' ).fadeOut(300,function()     {         var next_val = document.getElementById( "img_no" ).value;         var next_val = Number(next_val)+1;         if(next_val >= images.length)         {           next_val = 0;         }         $( '#slideshow_image' ).attr( 'src' , 'images/'+images[next_val]+'.jpg' );         document.getElementById( "img_no" ).value = next_val;     });     $( '#slideshow_image' ).fadeIn(1000); }

In this step we write all the name of images we want to see in slideshow in images[] array then we have two functions prev() and next() everytime when we call these functions we get the value of hidden field of id img_no and we modify image src based on the value of img_no then we do simple maths to change images and then change the value of hidden field for further use. We use fadeIn() and fadeOut() effect you can use any effect you want. For more jQuery Effects you can also see our jQuery Effects Tutorial .

That’s all, this is how to build a basic image slideshow with previous and next button using jQuery.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Basic Image Slideshow With Previous And Next Button Using jQuery

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮