Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML] Problem ze sliderem
Forum PHP.pl > Forum > Przedszkole
miras
Mam problem ze sliderem a mianowicie: problem polega na tym, że jeżeli nazwa zdjęcia to są same liczby np. (123456.png) to jest wszystko ok, ale jeżeli nazwa zdjęcia to (22adas22.png) to skrypt interpretuje to jako (22.png) według mnie to łamie ciąg jak napotka jakąś litere i przyjmuje tylko cyfry, problem w tym, że jestem noga z js i nie wiem w którym to miejscu może być... Dzięki z góry!



  1.  
  2. <div id="gallery">
  3. <div id="imagearea">
  4. <div id="image">
  5. <a href="java script:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
  6. <a href="java script:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
  7. </div>
  8. </div>
  9. <div id="thumbwrapper">
  10. <div id="thumbarea">
  11. <ul id="thumbs">
  12. {foreach item=zdjecie from=$zdj}
  13. <li value="23adas32"><img src="images/23adas32.png" width="179" height="100" alt="" /></li>
  14. {/foreach}
  15. </ul>
  16. </div>
  17. </div>
  18. </div>
  19.  
  20. <script type="text/javascript">
  21. var imgid = 'image';
  22. var imgdir = 'images';
  23. var imgext = '.png';
  24. var thumbid = 'thumbs';
  25. var auto = false;
  26. var autodelay = 5;
  27. <script type="text/javascript" src="templates/js/slide.js"></script>
  28.  
  29.  
  30.  



plik slide.js :

  1.  
  2. var slideShow=function(){
  3. var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
  4. ta=document.getElementById(thumbid); ia=document.getElementById(imgid);
  5. t=ta.getElementsByTagName('li'); ie=document.all?true:false;
  6. st=3; ss=3; ft=10; fs=5; xp,yp=0;
  7. return{
  8. init:function(){
  9. document.onmousemove=this.pos; window.onresize=function(){setTimeout("slideShow.lim()",500)};
  10. ys=this.toppos(ta); ye=ys+ta.offsetHeight;
  11. len=t.length;tar=[];
  12. for(i=0;i<len;i++){
  13. var id=t[i].value; tar[i]=id;
  14. t[i].onclick=new Function("slideShow.getimg('"+id+"')");
  15. if(i==0){this.getimg(id)}
  16. }
  17. tarl=tar.length;
  18. },
  19. scrl:function(d){
  20. clearInterval(ta.timer);
  21. var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10)
  22. ta.timer=setInterval(function(){slideShow.mv(d,l)},st);
  23. },
  24. mv:function(d,l){
  25. ta.style.left=ta.style.left||'0px';
  26. var left=ta.style.left.replace('px','');
  27. if(d==1){
  28. if(l-Math.abs(left)<=ss){
  29. this.cncl(ta.id); ta.style.left='-'+l+'px';
  30. }else{ta.style.left=left-ss+'px'}
  31. }else{
  32. if(Math.abs(left)-l<=ss){
  33. this.cncl(ta.id); ta.style.left=l+'px';
  34. }else{ta.style.left=parseInt(left)+ss+'px'}
  35. }
  36. },
  37. cncl:function(){clearTimeout(ta.timer)},
  38. getimg:function(id){
  39. if(auto){clearTimeout(ia.timer)}
  40. if(ci!=null){
  41. var ts,tsl,x;
  42. ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;
  43. for(x;x<tsl;x++){
  44. if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)}
  45. }
  46. }
  47. if(!document.getElementById(id)){
  48. var i=document.createElement('img');
  49. ia.appendChild(i);
  50. i.id=id; i.av=0; i.style.opacity=0;
  51. i.style.filter='alpha(opacity=0)';
  52. i.src=imgdir+'/'+id+imgext;
  53. }else{
  54. i=document.getElementById(id); clearInterval(i.timer);
  55. }
  56. i.timer=setInterval(function(){slideShow.fdin(i)},fs);
  57. },
  58. nav:function(d){
  59. var c=0;
  60. for(key in tar){if(tar[key]==ci.id){c=key}}
  61. if(tar[parseInt(c)+d]){
  62. this.getimg(tar[parseInt(c)+d]);
  63. }else{
  64. if(d==1){
  65. this.getimg(tar[0]);
  66. }else{this.getimg(tar[tarl-1])}
  67. }
  68. },
  69. auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},
  70. fdin:function(i){
  71. if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'}
  72. if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i}
  73. },
  74. fdout:function(i){
  75. i.av=i.av-fs; i.style.opacity=i.av/100;
  76. i.style.filter='alpha(opacity='+i.av+')';
  77. if(i.av<=0){clearInterval(i.timer); if(i.parentNode){i.parentNode.removeChild(i)}}
  78. },
  79. lim:function(){
  80. var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/8;
  81. bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;
  82. },
  83. pos:function(e){
  84. xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX;
  85. yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;
  86. if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){
  87. slideShow.scrl(-1);
  88. }else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){
  89. slideShow.scrl(1);
  90. }else{slideShow.cncl()}
  91. },
  92. leftpos:function(t){
  93. var l=0;
  94. if(t.offsetParent){
  95. while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent}
  96. }else if(t.x){l+=t.x}
  97. return l;
  98. },
  99. toppos:function(t){
  100. var p=0;
  101. if(t.offsetParent){
  102. while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent}
  103. }else if(t.y){p+=t.y}
  104. return p;
  105. }
  106. };
  107. }();
  108.  
  109. window.onload=function(){slideShow.init(); slideShow.lim()};

tolomei
Witaj.

Wrzuć przykład na jsfiddle.net czy jsbin.com to z chęcią zerknę.
Możesz ewentualnie podać adres strony z tym sliderem.

Pozdrawiam.

Dzięki za podesłanie linka na PW.

Zamień linię 13 czyli:

Kod
var id=t[i].value; tar[i]=id;


na następującą:

Kod
var id=t[i].getAttribute('value'); tar[i]=id;


I będzie śmigać.

Pozdrawiam.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.