JS Objects Object Definitions Object Properties Object Methods Object Display Object Accessors Object Constructors Object Prototypes Object Iterables Object Sets Object Maps Object Reference I'm learning new thing everyday.JS Tutorial JS HOME JS Introduction JS Where To JS Output JS Statements JS Syntax JS Comments JS Variables JS Let JS Const JS Operators JS Arithmetic JS Assignment JS Data Types JS Functions JS Objects JS Events JS Strings JS String Methods JS String Search JS String Templates JS Numbers JS BigInt JS Number Methods JS Number Properties JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates JS Date Formats JS Date Get Methods JS Date Set Methods JS Math JS Random JS Booleans JS Comparisons JS If Else JS Switch JS Loop For JS Loop For In JS Loop For Of JS Loop While JS Break JS Iterables JS Sets JS Maps JS Typeof JS Type Conversion JS Bitwise JS RegExp JS Precedence JS Errors JS Scope JS Hoisting JS Strict Mode JS this Keyword JS Arrow Function JS Classes JS Modules JS JSON JS Debugging JS Style Guide JS Best Practices JS Mistakes JS Performance JS Reserved Words I know there are many places to improve, for example this one is not a responsive one, also the architecture may has problems too. ![]() WIth the window.inload = init as the end, the image slider has been successfully finished! Var progress = timePassed / opts.duration The animate function is a generic function from this article: The only difference is after clearInterval() i will call the callback function to keep the animation loop going on. Here is the generic animation function I learned form the javascript animation tutorial i posted the link below. Ul.style.left = ‘-’ + parseInt(leftPosition) + ‘px’ if it doesn’t slied to the last image, keep sliding Ul.style.left = ‘-’ + parseInt(currentImage * imageWidth + delta * imageWidth) + ‘px’ * delta start from 0 to 1, delta * imageWidth is the pixels that changesĭelta:function(p), * currentImage * imageWidth is the currentImage position of ul *step function will be called many times until clearInterval() been called Here is the function slider() /**delta function is to set how the image slide-keep still for a while and move to next picture. ![]() We can also use computedStyle to get the width of one image, but in that case what we get is “760px”, not 760 var computedStyle = (liItems.childNodes, null) 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. offsetWidht returns a number! (typeof(imageWidth) returns “number”). Ul.style.width = parseInt(imageWidth * imageNumber) + ‘px’ set ul’s width as the total width of all images in image slider. Ul = document.getElementById(‘image_slider’) Set li to list-style:none and float left, so the images will be in a long line.Īll right, now we’ve have everything ready to move. Webkit has default padding and margin for ul, so we will initialize it with 0px. So when there are more/less images we don’t need to change css. There are no width set for ul( id=image_slider) because we will set it in Javascript. The image-slider-wrapper need to set overflow: hidden cause ul will be a very long list in a line. The image-slider-wrapper part is for the convenience when I do future work. The basic idea of image slider is to create a long list. ![]() I just want to learn JS and get a better understanding of it, so i use javascript to complete it.ĭemo 1 is different from demo 2 and 3 and demo 2 and 3 are using the same core codes.īelow is how to do the basic one-move to the next image after a set of time interval. There are many image sliders on the internet.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |