码迷,mamicode.com
首页 > Web开发 > 详细

JQuery实现照片无触发滑动

时间:2015-03-03 11:19:56      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

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

JQuery实现照片无触发滑动

标签:

原文地址:http://www.cnblogs.com/hershin/p/4310420.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!