我想创建一个基本的 Javascript 滑块答案

【问题标题】：I want to create a Basic Javascript slider我想创建一个基本的 Javascript 滑块
【发布时间】：2013-07-18 12:50:11
【问题描述】：

我的网站需要一个基本的图片滑块，由五张图片组成，顺序如下

开始时 > 第一张应该可见 3 秒然后消失图片 2 - 5 秒后第二张图片应该可见 3 秒然后消失图像 3 - 10 秒后第三张图像应该可见 3 秒然后消失图像 4 - 15 秒后第 4 个图像应该可见 3 秒然后消失图像 5 - 20 之后秒 5th 图像应该可见 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>

【问题讨论】：

那你的问题是什么？
第一个图像应该可见 3 秒然后消失 5 秒，第二个图像应该可见 3 秒然后消失 10 秒，这样它会增加。 b 但现在我的代码不能那样工作了。
无需自己重复代码。使用步骤号作为键将所有时间放在 JSON 对象中。然后使用步数获取时间来设置定时器，这样你的代码就会变得易读。
嗨，这段代码是否正确。但图像只有 1 秒可见，但我给了 3,10,20 秒

标签： javascript html javascript-framework

【解决方案1】：

我找到了解决办法

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

【讨论】：

【解决方案2】：

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

【讨论】：