Panel silder con jquery


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <html lang="en">
  2. <head>
  3. <title>Panel slider</title>
  4. <script type="text/javascript" src="jquery.js"></script>
  5. <style type="text/css">
  6. #panel {
  7. position: absolute;
  8. bottom: -100px;
  9. left: 10px;
  10. width: 645px;
  11. height: 355px;
  12. }
  13. #left_slide {
  14. width: 300px;
  15. position: absolute;
  16. left: 0;
  17. top: 80px;
  18. z-index: 1;
  19. }
  20. #center_slide {
  21. width: 478px;
  22. position: absolute;
  23. left: 84px;
  24. top: 0;
  25. z-index: 2;
  26. }
  27. #right_slide {
  28. width: 300px;
  29. position: absolute;
  30. left: 345px;
  31. top: 80px;
  32. z-index: 1;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37.  
  38. <div id="panel">
  39. <img src="http://valendesigns.com/wp-content/themes/valen/images/panel/left_slide.png" id="left_slide" alt="" />
  40. <img src="http://valendesigns.com/wp-content/themes/valen/images/panel/center_slide.png" id="center_slide" alt="" />
  41. <img src="http://valendesigns.com/wp-content/themes/valen/images/panel/right_slide.png" id="right_slide" alt="" />
  42. </div>
  43.  
  44. <script type="text/javascript">
  45. /* <![CDATA[ */
  46. // Panel Slider
  47. $.fn.imageSlide = function(options) {
  48. var images = this.find('img').get(),
  49. container = this,
  50. settings = $.extend({
  51. speed: 400,
  52. styles : [{},{},{}]
  53. }, options),
  54. animating = false;
  55. function slide(direction) {
  56. animating = true;
  57. var left = direction.toLowerCase() === 'left';
  58.  
  59. $(images).each(function(i){
  60. $(images[i]).animate(settings.styles[left ? (i == 0 ? 2 : i - 1) : (i == 2 ? 0 : i + 1)], settings.speed);
  61. });
  62. setTimeout(function(){
  63. $(images[0]).css({zIndex: left ? 1 : 2});
  64. $(images[1]).css({zIndex: 1});
  65. $(images[2]).css({zIndex: left ? 2 : 1});
  66. }, settings.speed / 2);
  67. setTimeout(function(){
  68. var old = images;
  69. images = [];
  70. images[0] = old[left ? 1 : 2];
  71. images[1] = old[left ? 2 : 0];
  72. images[2] = old[left ? 0 : 1];
  73. animating = false;
  74. }, settings.speed);
  75.  
  76. }
  77. $(container).click(function(e){
  78. if(animating) {return;}
  79. if(e.target === images[0]) {slide('right')}
  80. else {slide('left')}
  81. })
  82. return this;
  83. };
  84.  
  85. $('#panel img').css('cursor','pointer');
  86. $('#panel').imageSlide({
  87. // Higher = slower
  88. speed: 400,
  89. // Set each image's dimensions here:
  90. styles : [
  91. {width: 300,top: 80,left: 0},
  92. {width: 478,left: 84,top: 0},
  93. {width: 300,top: 80,left: 345}
  94. ]
  95. })
  96. /* ]]> */
  97. </script>
  98.  
  99. </body>
  100. </html>

URL: http://valendesigns.com/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.