Question

我的网站需要一个基本图像滑块，它包含五个图像，按以下顺序

一开始＆gt; 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>

Answer 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)
    }
  }

Answer 2

我得到了解决方案

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

我想创建一个Basic Javascript滑块

2 个答案: