Je veux créer un Javascript de base curseur

je besoin d'un curseur sur l'image de base pour mon site web, qui se compose de cinq images, dans l'ordre suivantJe veux créer un Javascript de base curseur

Au début> 1 er doit être visible pendant 3 secondes puis disparaissent image 2 - Au bout de 5 secondes 2ème image Doit être visible pendant 3 secondes puis disparaître Image 3 -Après 10 secondes 3ème image Doit être visible pendant 3 secondes puis disparaître Image 4 -Après 15 secondes 4ème image Doit être visible pendant 3 secondes puis disparaître Image 5 -Après 20 secondes 5ème image Doit être visible pendant 3 secondes puis disparaître

<div id="image" style="display:block"> 
<img src="images/one.jpg" name="slide" width="250" height="250" /> 

<div id="hello"></div> 
<script> 
var image1=new Image() 
image1.src="images/one.jpg" 
var image2=new Image() 
image2.src="images/two.jpg" 
var image3=new Image() 
image3.src="images/three.jpg" 

function slideit(){ 
//if browser does not support the image object, exit. 
if (!document.images) 
return 
document.images.slide.src=eval("image"+step+".src") 
if (step<3) 
step++ 
else 
step=1 
//call function "slideit()" every 2.5 seconds 
setTimeout("slideit()",2500) 
} 
slideit() 
*///--> 


var step=1 
function slide(){ 
    document.getElementById('image').style.display = "block"; 
//if browser does not support the image object, exit. 
document.getElementById('hello').innerHTML = ""; 
if (step < 3 && step == 1) { 
    if (!document.images) 
return 
document.images.slide.src=eval("image"+step+".src") 

setInterval(function(){clock()},4000); 
step++; 
setTimeout("slide()",10000) 
} 
else if (step < 3 && step == 2) { 
    if (!document.images) 
return 
document.images.slide.src=eval("image"+step+".src") 

setInterval(function(){clock()},4000); 
step++; 
setTimeout("slide()",20000) 
} 

else { 
    step=1; 
    if (!document.images) 
return 
document.images.slide.src=eval("image"+step+".src") 


setInterval(function(){clock()},4000); 
setTimeout("slide()",3000) 
//call(); 
} 
//call function "slideit()" every 2.5 seconds 

//var refreshIntervalId = setInterval(fname, 10000); 
} 
//slide() 
function clock() 
{ 
document.getElementById('image').style.display = "none"; 
document.getElementById('hello').innerHTML = "Hai"; 
//window.clearInterval(); 
//setTimeout("slide()",100000) 
return; 

}slide() 
</script> 
</body>

Source

2013-07-19 Raj

Quelle est votre question alors? –

La première image doit être visible pendant 3 secondes puis disparaître pendant 5 secondes, et l'image de la 2ème seconde doit être visible pendant 3 secondes puis disparaître pendant 10 secondes comme si elle allait augmenter. b mais maintenant mon code ne fonctionne pas comme ça. – Raj

Pas besoin de répéter le code vous-même. Placez tout le timing dans un objet JSON en utilisant le numéro d'étape en tant que clé. Ensuite, utilisez le numéro de l'étape pour obtenir le temps de régler la minuterie, afin que votre code devienne facile à lire. – Nishanthan

var Slider = function() { this.initialize.apply(this, arguments) } 
    Slider.prototype = { 

    initialize: function(slider) { 
     this.ul = slider.children[0] 
     this.li = this.ul.children 

     // make <ul> as large as all <li>’s 
     this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px' 

     this.currentIndex = 0 
    }, 

    goTo: function(index) { 
     // filter invalid indices 
     if (index < 0 || index > this.li.length - 1) 
     return 

     // move <ul> left 
     this.ul.style.left = '-' + (100 * index) + '%' 

     this.currentIndex = index 
    }, 

    goToPrev: function() { 
     this.goTo(this.currentIndex - 1) 
    }, 

    goToNext: function() { 
     this.goTo(this.currentIndex + 1) 
    } 
    }

Source

2013-07-19 09:37:42

i obtenu la solution

<script type="text/javascript"> 
    var employees = [ 
     {"image":"xxyy/images/one.jpg","time": "3000","interval":"12000" }, 
     {"image":"xxyy.com/images/two.jpg","time": "4000" ,"interval":"14000"}, 
     {"image":"xxyy.com/images/three.jpg" ,"time": "5000","interval":"15000"}, 
     {"image":"xxyy.com/images/four.jpg","time":"4500","interval":"12000"} 
    ]; 
</script> 
<body> 
    <input id="val" type="hidden" name="hidden" value=""/> 
    <div id="image" style="display:block"> 
     <img src="" name="slide" width="250" height="250" /> 
     <img src="" name="slide" width="250" height="250" /> 
    </div> 
    <div id="hello"></div> 
    <script> 
     var step=0; 
     function slide1(){ 
      if(step < cnt){   
       b = employees[step].image_name;  
       time = employees[step].time;   
       interval = employees[step].interval; 
       document.getElementById('hello').innerHTML = ""; 
       document.getElementById('image').style.display = "block"; 
       document.images.slide.src = "../images/"+b; 
       setTimeout("clock()",time); 
       setTimeout("slide1()",interval); 
       step++; 
       if(step >= cnt) { 
        step = 0 ; 
       } 
      } 
     } 
     function clock() { 
      document.getElementById('image').style.display = "none"; 
      document.getElementById('hello').innerHTML = "Hai"; 
      //setTimeout("slide()",100000) 
      return ; 
    } 
    slide1() </script>`

Source

2013-08-04 06:16:59 Raj

Je veux créer un Javascript de base curseur

Répondre

Questions connexes