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>

时间: 2024-12-28 21:38:01

JQuery实现照片无触发滑动的相关文章

jQuery单页无刷新关键词查找功能

jQuery广告代码单页无刷新关键词查找功能是一款直接在数据库内查找内容,并且滑动跳转到指定的内容上,用来增加用户体验是个不错的效果. 来源:http://www.huiyi8.com/jiaoben/ jQuery单页无刷新关键词查找功能

jQuery手机触屏左右滑动切换栏目和焦点图

实现jQuery手机触屏左右滑动用到一个滑动插件TouchSlide,大家可以百度下. 首先来看看左右滑动切换焦点图: JQuery代码 $(function(){ TouchSlide({ slideCell:"#slideBox", titCell:".myhd ul", //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层 mainCell:".bd ul", effect:"leftLoop

用jquery写一个无刷新评论功能

<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script> <script type="text/javascript&quo

JQuery 实现页面无刷新

对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作.(http://itred.cnblogs.com    itRed: [email protected]) 在用JQuery实现页面无刷新的效果之前,我们需要掌握和了解一些基础知识,以方便我们在进行代码编写时更加的得心应手. 一.异步技术 浏览器预设是使用同步的方式发出请求并等待回应,为了处理浏

解决jQuery中dbclick事件触发两次click事件

首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbclick可以触发两次click事件.例如一个DOM元素div,既绑定了 click 事件,又绑定了 dblclick 事件,这两个事件分别要做独立的事情.事件处理上没有冲突,都可以各自完成各自的操作.双击的时候虽然是执行了 dblclick 事件,但是在这之前,也执行了click 事件,那么,如何来

jQuery 代码的层定位滑动动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery层动画定位滑动</tit

jQuery左侧图片右侧文字滑动切换代码

分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="index-new w1200 mt30"> <div class="indexadd mt50 mb60"> <div id="banners" class="ui-banner"> <

jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. html代码: <div class="main-page"> <div class="left"> <div class="nav-back"> </div> <div class="

jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效

原文:jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效 源代码下载地址:http://www.zuidaima.com/share/1607128309009408.htm 版权声明:本文为博主原创文章,未经博主允许不得转载.