Created
June 24, 2014 02:15
-
-
Save jp-resource/477d9c9d183fd0cbcd47 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Slideshow Test2</title> | |
| </head> | |
| <body> | |
| <div id="slideShow"> | |
| <!-- <img id="myPic" src="http://placehold.it/350x150&text=Hello1" alt=""> | |
| <p> | |
| <a href="#" id="prevLink">Previous</a> | |
| <a href="#" id="nextLink">Next</a> | |
| </p> --> | |
| </div> | |
| <div id="slideShow2"></div> | |
| <script type="text/javascript"> | |
| // var $ = function(el){ | |
| // return document.getElementById(el); | |
| // }, | |
| // currImg = 0, | |
| // myPix = ["http://placehold.it/350x150&text=Hello1", "http://placehold.it/350x150&text=Hello2", "http://placehold.it/350x150&text=Hello3", "http://placehold.it/350x150&text=Hello4"]; | |
| // function processPrev(){ | |
| // if (currImg == 0) { | |
| // currImg = myPix.length; | |
| // }; | |
| // currImg--; | |
| // $('myPic').src = myPix[currImg]; | |
| // return false; | |
| // } | |
| // function processNext(){ | |
| // currImg++; | |
| // if(currImg == myPix.length){ | |
| // currImg = 0; | |
| // } | |
| // $('myPic').src = myPix[currImg]; | |
| // return false; | |
| // } | |
| // window.onload = function(){ | |
| // $('nextLink').onclick = processNext; | |
| // $('prevLink').onclick = processPrev; | |
| // } | |
| // $.fn.slideShow = function(){ | |
| // var currImg = 0, | |
| // myPix = ["http://placehold.it/350x150&text=Hello1", "http://placehold.it/350x150&text=Hello2", "http://placehold.it/350x150&text=Hello3", "http://placehold.it/350x150&text=Hello4"]; | |
| // $(this).on('click', function(e){ | |
| // if(e.target.id == 'nextLink'){ | |
| // currImg++; | |
| // if(currImg == myPix.length){ | |
| // currImg = 0; | |
| // } | |
| // console.log($(this).find('#myPic')); | |
| // $(this).find('#myPic')[0].src = myPix[currImg]; | |
| // return false; | |
| // }else if(e.target.id == 'prevLink'){ | |
| // if(currImg == 0){ | |
| // currImg = myPix.length; | |
| // } | |
| // currImg--; | |
| // $(this).find('#myPic')[0].src = myPix[currImg]; | |
| // return false; | |
| // } | |
| // }); | |
| // }; | |
| // $("#slideShow").slideShow(); | |
| function SlideShow(el, myPix, currImg){ | |
| var that = this; | |
| that.el = el || '' ; | |
| that.myPix = myPix || [] ; | |
| that.currImg = currImg || 0 ; | |
| var $ = function(sel){ | |
| return document.getElementById(sel); | |
| }; | |
| $(that.el).innerHTML = '<img id="'+ el +'_myPic" src="'+myPix[currImg]+'" alt="">'+'<p>'+'<a href="#" id="'+el+'_prevLink">Previous</a>'+' <a href="#" id="'+el+'_nextLink">Next</a>' +' </p>' ; | |
| that.processNext = function processNext(){ | |
| that.currImg++; | |
| if(that.currImg == that.myPix.length){ | |
| that.currImg = 0; | |
| } | |
| $(el + '_myPic').src = that.myPix[that.currImg]; | |
| return false; | |
| } | |
| that.processPrev = function procesPrev(){ | |
| if(that.currImg == 0){ | |
| that.currImg = that.myPix.length ; | |
| } | |
| that.currImg--; | |
| $(el + '_myPic').src = that.myPix[that.currImg]; | |
| return false; | |
| } | |
| $(el + '_nextLink').onclick = that.processNext; | |
| $(el + '_prevLink').onclick = that.processPrev; | |
| } | |
| // Make Instance | |
| var myPix = ["http://placehold.it/350x150&text=Hello1", | |
| "http://placehold.it/350x150&text=Hello2", | |
| "http://placehold.it/350x150&text=Hello3", | |
| "http://placehold.it/350x150&text=Hello4"]; | |
| var myPix2 = ["http://placehold.it/350x150&text=Hello5", | |
| "http://placehold.it/350x150&text=Hello6", | |
| "http://placehold.it/350x150&text=Hello7", | |
| "http://placehold.it/350x150&text=Hello8"]; | |
| var mySlider = new SlideShow('slideShow', myPix, 0); | |
| var mySlider2 = new SlideShow('slideShow2', myPix2, 0); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment