因为是新手,所以在做照片相册滑动的时候,刚开始只会在有触发的情况下实现照片的滑动。即使采用setInterval()函数,也必须添加click()等相似函数触发向左或向右箭头,才能实现自动滑动。
那么,如何在没有触发任何标签的情况下,就能使照片自动滑动呢?
首先看一下setInterval()函数的属性:setInterval(code,millisec[,"lang"])
W3C中这样定义setInterval:
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
那么,如果自己定义一个函数,该函数实现了照片轮流显示,然后用setInterval()调用该函数,应该就可以实现无触发情况下,照片的自动滑动。
假设一共有4张照片,slide为照片的类名:
var i=1;
/*定义照片轮流显示函数*/
var slideAuto=function(){
i++;
if (i==5) {i=1;};
$(".slide"+i).show().siblings().stop().hide();
}
/*调用setInterval实现无触发滑动*/
var time=setInterval(slideAuto,6000);
html部分代码:
<div style="position:relative;left:0;top:0;z-index:0;width:4000px;height:500px;">
<img class="slideImg slide1" src="./img/img1.jpg" alt="图片1" width=1000 height=500>
<img class="slideImg slide2" src="./img/img2.jpg" alt="图片2" width=1000 height=500>
<img class="slideImg slide3" src="./img/img3.jpg" alt="图片3" width=1000 height=500>
<img class="slideImg slide4" src="./img/img4.jpg" alt="图片4" width=1000 height=500>
</div>