JQuery实现照片无触发滑动

因为是新手，所以在做照片相册滑动的时候，刚开始只会在有触发的情况下实现照片的滑动。即使采用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>

转载于:https://www.cnblogs.com/hershin/p/4310420.html