0

次の順序で 5 つの画像で構成される、私の Web サイト用の基本的な画像スライダーが必要です

開始時 > 1 番目 3 秒間表示されてから消える 画像 2 - 5 秒後 2 番目の画像 3 秒間表示されてから消える 画像 3 - 10 秒後 3 番目の画像 3 秒間表示されてから消える 画像 4 - 後15 秒 4 番目の画像 3 秒間表示されてから消える 画像 5 - 20 秒後 5 番目の画像 3 秒間表示されてから消える

<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>
4

2 に答える 2

1 
 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)
    }
  }
于 2013-07-19T09:37:42.893 に答える
0

私は解決策を得ました

<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>`
于 2013-08-04T06:16:59.540 に答える