定时器

代码效果如上；

定时器主要使用（setInterval:每隔多少毫秒，执行程序）

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>定时器</title><script src="js/jquery.min.js"></script><script>$(function(){// //setTimeout:在多少毫秒之后,执行一段程序,// setTimeout(function(){//     $("#content").text("动态生成！")// },1000);//setInterval:每隔多少毫秒，执行程序setInterval(function(){$("#content").append("定时器添加！");},1000);});</script></head><body><div id="content"></div></body>
</html>

轮播图

代码效果图如下：

代码如下：

这段代码主要用定时器来实现一秒切换下一张图片，以及鼠标点击事件点击上一张下一张切换图片

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>轮播图</title><style type="text/css">#content{width: 300px;height: 300px;margin: 10px auto;}#content img{width: 100%;height: 100%;}#ctr1{width: 300px;margin: 10px auto;}#before{display: block;position: absolute;width: 60px;height: 30px;left: 700px;top: 160px;}#after{display: block;position: absolute;width: 60px;height: 30px;right: 700px;top: 160px;}</style><script src="js/jquery.min.js"></script><script>$(function(){//2.直接修改图片地址的数字编号var n=1;setInterval(function(){n++;if(n==5){n=1;}$("#pic").attr("src","img/"+n+".jpg");},1000);//上一张和下一张的操作，首先要确定当前的图片是第几张$("#before").click(function(){//获取当前图片的地址字符串var src = $("#pic").attr("src");//获取字符串最后.jpg的位置索引var index = src.lastIndexOf(".jpg");//位置索引-1就是图片的编号索引，根据编号索引取出该位置的字符串值，转成int值var n=parseInt(src.charAt(index-1));if(n==1){//如果是第一张直接变成第六张n==5;}else{//如果不是第一张，-1变成前一张n--;}//重新修改图片的地址$("#pic").attr("src","img/"+n+".jpg");});$("#after").click(function(){//获取当前图片的地址字符串var src = $("#pic").attr("src");//获取字符串最后.jpg的位置索引var index = src.lastIndexOf(".jpg");//位置索引-1就是图片的编号索引，根据编号索引取出该位置的字符串值，转成int值var n=parseInt(src.charAt(index-1));if(n==5){//如果是第一张直接变成第六张n=1;}else{//如果不是第一张，-1变成前一张n++;}//重新修改图片的地址$("#pic").attr("src","img/"+n+".jpg");});});</script></head><body><div id="content"><img src="img/1.jpg" id="pic"/><div id="ctr1"><button id="before">上一张</button><button id="after">下一张</button></div></div></body>
</html>

抽奖案例

效果图如下：

代码如下：

我们首先要通过鼠标点击事件实现点开始按钮，开始按钮不可用，点结束按钮，结束按钮不可用然后也引用到了定时器

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>抽奖案例</title><style type="text/css">#content{width: 300px;height: 250px;border: 1px lightpink solid;text-align: center;font-size: 50px;color: #FFB6C1;}#ctr1{width: 300px;margin-top: 10px;}#stop{display: block;float: right;}</style><script src="js/jquery.min.js"></script><script>$(function(){var name = ["kuromi","cinnamoroll","hello kitty","pochacco","melody"];var interval;$("#start").click(function(){//让开始按钮不可用$(this).attr("disabled",true);//让结束按钮不可用$("#stop").removeAttr("disabled");//定义定时器，随机0-4的索引，然后根据索引取出数组中的值，显示到div中interval = setInterval(function(){//1.随机0-5的索引值var n = Math.floor(Math.random()*5);$("#content").text(name[n]);},100);});$("#stop").click(function(){//让结束按钮不可用$(this).attr("disabled",true);//让开始按钮可用$("#start").removeAttr("disabled");//移除属性为disabled名称//把定时器关闭clearInterval(interval);});});</script></head><body><div id="content"></div><div id="ctr1"><button id="start">开始</button><button id="stop">结束</button></div></body>
</html>

JQuery定时器和轮播图相关推荐

html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
jQuery实现异形轮播图
思路: 异形轮播图与普通轮播图不同的一点,是异形轮播图一次性展示多个图片,且图片大小的位置会动态变化. 以往我的处理办法都是直接给要展示的图片动态的添加一个class类, 简单粗暴.这次我在很多地方都 ...
html新闻轮播插件,jQuery新闻类轮播图插件sliderBox
sliderBox.js是一款jQuery新闻类轮播图插件.该jQuery新闻类轮播图插件可以创建兼容ie8.带缩略图导航.以及多种过渡效果的轮播图. 使用方法在页面中引入jQuery.slider ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
html5carousel图片轮播,jquery 3d Carousel轮播图插件
jQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图插件.该jquery Carousel轮播图插件兼容ie8浏览器,提供丰富的参数和API方法由于控制 ...
jquery手写轮播图_jquery 实现轮播图详解及实例代码_jquery_脚本之家
轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写 ...
JQuery实现圆点轮播图自动播放
用jquery实现轮播图实现之后的效果实现思路 1,每次只显示一张图片其他的图片隐藏起来 2,每一次轮播相应位置的小圆点跟着变色 3,鼠标移入小圆点时显示相应的图片源代码 <!DOCTY ...
使用jQuery完成无缝轮播图案例
前言: 一.前面给大家讲了关于css的一些有趣的小案例,这一期来给大家介绍下jQuery,jQuery的使用相比较js的使用比较简单,因为jQuery会自动给你生成循环函数,使代码简洁,相比较js实现 ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...

JQuery定时器和轮播图

定时器

轮播图

抽奖案例

JQuery定时器和轮播图相关推荐

最新文章

热门文章