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.


Possibly Related Threads...
Thread Author Replies Views Last Post
  SHARED: Introducing Hrouter.js Javascript Routing Library Horlahcoded 7 84 10-16-2017, 10:13 PM
Last Post: iamdannyfc
  SHARED: Introducing Hkwest.js Javascript Ajax Library Horlahcoded 0 37 10-15-2017, 09:46 AM
Last Post: Horlahcoded
  HELP: Javascript Vs Jquery. beme 10 296 08-21-2017, 07:20 AM
Last Post: beme
  HELP: How To Create Date And Time Script To Display On My Wapka Site reality867 0 41 08-17-2017, 12:49 PM
Last Post: reality867
  Test Your Javascript Knowledge Dealwap 10 563 08-16-2017, 07:41 PM
Last Post: Thepreditor
  How Can I Submit A Form Using Javascript iamdannyfc 11 235 06-22-2017, 10:13 PM
Last Post: bfaschat
  TUTORIAL: Take A Selfie With Javascript SamBlingxZ 0 82 06-05-2017, 11:41 PM
Last Post: SamBlingxZ
  3 Types Of Javascript Animations That I So Much Admire! Laive 5 213 05-20-2017, 09:40 AM
Last Post: Laive
  HELP: How Can I Create A Javascript Ads Rotator For My Site Eddykul 5 219 03-30-2017, 09:51 AM
Last Post: Harsh
  Beginner Javascript Coding Mistakes To Avoid smartlord 2 258 02-08-2017, 04:04 PM
Last Post: smartlord



Users browsing this thread: 1 Guest(s)

About Nigeria's Creative Talents

Nigeria's Creative Talents is an online community where every creative Nigerians can share ideas with themselves.

For any more information, please use our contact form.

              User Links

              Advertise