Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How To Create An Image Slider With Javascript
#1
There are many image sliders on the internet. Most of then are written by jQuery. I just want to learn JS and get a better understanding of it, so i use javascript to complete it.
you can find the demo here:

1.basic: http://cssdeck.com/labs/image-slider-1

2.with prev/next button: http://cssdeck.com/labs/imageslider-button

3.with pager: http://cssdeck.com/labs/imageslider-pager

Demo 1 is different from demo 2 and 3; and demo 2 and 3 are using the same core codes.

Below is how to do the basic one—move to the next image after a set of time interval. no user interrupt.
The basic idea of image slider is to create a long list. actually is a long 'ul'
The html part is:

Code:
<div class =”container” >
<div class =”image-slider-wrapper” >
<ul id= ”image_slider” >
<li><img src =”./image/1.jpg” ></li>
<li><img src =”./image/4.jpg” ></li>
<li><img src =”./image/5.jpg” ></li>
<li><img src =”./image/4.jpg” ></li>
<li><img src =”./image/1.jpg” ></li>
<li><img src =”./image/5.jpg” ></li>
</ul>
</div>
</div>

the image-slider-wrapper part is for the convenience when I do future work.
the css part is:



The image-slider-wrapper need to set overflow: hidden cause ul will be a very long list in a line. but only one image can be seen.

There are no width set for ul( id=image_slider) because we will set it in Javascript. So when there are more/less images we don’t need to change css.
Webkit has default padding and margin for ul, so we will initialize it with 0px.
Set li to list-style:none and float left, so the images will be in a long line.
All right, now we’ve have everything ready to move.

Next is the JS part.
In the function init(),

1. set ul width

2. move ul



.offsetWidht returns a number!

(typeof(imageWidth) returns “number”).

offsetWidth is the width that includes content, padding, scrollbar and border.if there are borders for each image, the width of ul will also be correct.
we can also use computedStyle to get the width of one image, but in that case what we get is “760px”, not 760


Code:
var computedStyle = document .defaultView. getComputedStyle
(liItems [i ].childNodes [ 0], null);
imageWidth = computedStyle . width ;
here is the function slider()

/**delta function is to set how the image slide—keep still for a while and move to next picture.
*step function will be called many times until clearInterval() been called
* currentImage * imageWidth is the currentImage position of ul
* delta start from 0 to 1, delta * imageWidth is the pixels that changes
**/


The delta function make sure that each animation will keep still for a while then move to the next image. (if y<0, then y=0Wink

The step function does the animation. But it only slide one image. The callback function will make sure there is a loop for all images. And if it’s the last image, it calls the “goBack” function to slide to the first image.



Here is the generic animation function I learned form the javascript animation tutorial i posted the link below. The only difference is after clearInterval() i will call the callback function to keep the animation loop going on.
The animate function is a generic

function from this article:

I think it’s a pretty good one.
http://javascript.info/tutorial/animatio...-animation


WIth the window.inload = init; as the end, the image slider has been successfully finished!

I know there are many places to improve, for example this one is not a responsive one, also the architecture may has problems too. I'm learning new thing everyday.I will keep practicing and write better code!

Source
It takes so long to learn simplicity.
Facebook Share


Possibly Related Threads...
Thread
  Beginner Javascript Coding Mistakes To Avoid
  Concatenate Many Arrays Uniquely With Javascript
  Javascript Time Ago Function
  Shortest Code For Random Number Between 1 And N In Javascript
  Javascript Text Editor Right In Your Browser In One Line Of Code
  Getting Current Location With Javascript
  How To Check If Javascript Object Is Empty
  Convert Numbers To Roman Numerals With Javascript
  TUTORIAL: How To Make A Digtal Clock With Javascript
  Remove All Falsy Values From An Array With Javascript




Users browsing this thread: 1 Guest(s)