我想创建一个基本的 Javascript 滑块
Posted
技术标签:
【中文标题】我想创建一个基本的 Javascript 滑块【英文标题】：I want to create a Basic Javascript slider 【发布时间】：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" />
<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 秒 【参考方案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" />
<img src="" name="slide" />
</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)
【讨论】：
以上是关于我想创建一个基本的 Javascript 滑块的主要内容，如果未能解决你的问题，请参考以下文章