JAVASCRIPT   66

divslider.js

Guest on 12th September 2021 10:21:25 AM

  1. var prop = new Object();
  2. prop.arrowLeft = ".arrowLeft";
  3. prop.arrowRight = ".arrowRight";
  4. prop.description = ".description";
  5. prop.plate = ".plate";
  6. prop.dot = "div_slider/dot.png";
  7. prop.dotover = "div_slider/dotover.png";
  8. prop.dotcontainer = ".dotcontainer";
  9. prop.piccontainer = ".piccontainer";
  10.  
  11. var scrollamount=0;
  12. var counter=0;
  13. var maxcounter=0;
  14. var dot_html="";
  15. var timeInterval=3000;
  16. var intervalID;
  17. var animate_time=1850;
  18. var jerkTime=550;
  19. var currentNum=0;
  20.  
  21.  
  22.  
  23. $(document).ready(function(){
  24.                                                    
  25.                                                  
  26.                                                    scrollamount = parseInt($(prop.piccontainer).css('width'))
  27.                                                    maxcounter =  $(prop.plate).find('img').length;
  28.                                                    $(prop.plate).css('width',$(prop.plate).find('img').length*scrollamount)
  29.                                                    
  30.                                                    $(prop.plate).find('img').each(function(n){
  31.                                                                                                                                    
  32.                                                                                                                        
  33.                                                                                                                         dot_html = "<li id='li_"+n+"'><img alt='"+n+"' src='"+prop.dot+"'/></li>";
  34.                                                                                                                         $(this).css('position','absolute');
  35.                                                                                                                         $(this).css('left',(scrollamount*n)+'px');
  36.                                                                                                                         $(prop.dotcontainer+" ul").append(dot_html);  
  37.                                                                                                                         $(prop.dotcontainer+" ul").find('li').eq(n).bind('click',buttonClick);
  38.                                                                                                                                
  39.                                                                                                                        
  40.                                                                                                                         });
  41.                                                  
  42.                                                    
  43.                                                    var info = $(prop.plate).find('img').eq(counter).attr('alt');
  44.                                                    $(prop.description).find('div').html(info)
  45.                                                    intervalID = setInterval(nextSlide,timeInterval);
  46.                                                    
  47.                                                    $(prop.arrowLeft).bind('click',arrowAction)
  48.                                                    $(prop.arrowRight).bind('click',arrowAction)
  49.                                                    
  50.                                                    });
  51.  
  52. function moveIt(t)
  53. {
  54.         tgt = counter*(-1)*scrollamount;
  55.         $(prop.plate).stop().animate({left:tgt},t,"easeOutExpo");
  56.         var info = $(prop.plate).find('img').eq(counter).attr('alt');
  57.         $(prop.description).find('div').html(info)
  58.         out(currentNum);
  59.         hover(counter);
  60.         currentNum = counter;
  61. }
  62.  
  63. function nextSlide()
  64. {
  65.         if(counter<maxcounter-1){
  66.         counter++;
  67.         moveIt(animate_time);
  68.         }
  69.         else
  70.         {
  71.                
  72.         }
  73. }
  74.  
  75. function previousSlide()
  76. {
  77.         if(counter>0){
  78.         counter--;
  79.         moveIt(animate_time);  
  80.         }
  81. }
  82.  
  83. function openImage(n)
  84. {
  85.         counter=n;
  86.         moveIt(jerkTime);
  87. }
  88.  
  89. function hover(n)
  90. {
  91.         $(prop.dotcontainer+" ul").find('li').eq(n).find('img').attr('src',prop.dotover);      
  92. }
  93.  
  94. function out(n)
  95. {
  96.         $(prop.dotcontainer+" ul").find('li').eq(n).find('img').attr('src',prop.dot);  
  97. }
  98.  
  99. function buttonClick(e)
  100. {
  101.   clearInterval(intervalID)
  102.  
  103.   openImage($(this).attr('id').split("_")[1])
  104. }
  105.  
  106. function arrowAction()
  107. {
  108.  var lft = prop.arrowLeft.split(".")[1];
  109.  var rght = prop.arrowRight.split(".")[1];
  110.  
  111.   switch($(this).attr('class'))
  112.   {
  113.         case ""+lft+"":
  114.         clearInterval(intervalID)
  115.         previousSlide();
  116.  
  117.         break;
  118.        
  119.         case ""+rght+"":
  120.         clearInterval(intervalID);
  121.         nextSlide();
  122.         break;
  123.        
  124.        
  125.   }
  126. }

Raw Paste


Login or Register to edit or fork this paste. It's free.