JQuery轮播图片效果
2015-07-27 22:22
651 查看
【目标】
制作一个有5张图片的轮播图
【分析】
想要制作轮播图,需要如下3个步骤:
1、页面打开之后,第一个图片显示,其余的图片,隐藏
2、图片间隔5秒轮播一次
3、传到第5个图后回到第1张
【制作】
1、页面打开之后,第一个图片显示,其余的图片,隐藏:
$(“.bg”).not(“:eq(0)”).hide();
2、间隔5秒轮播:
Var i=0;
$(function(){
$(“.bg”).not(“:eq(0)”).hide(); //不是第一张图片的其余图片都隐藏
setInterval(function(){
i++;
$(“.bg”).eq(i).show(); //第i个图片显示
$(“.bg”).not(“:eq(“+i+”)”).hide(); //不是第i个图片的隐藏
},5000);
})
3、传到第5个图后回到第1张:
if(i==5)
{
i=0;
}
【完整程序】
Var i=0;
$(function(){
$(“.bg”).not(“:eq(0)”).hide(); //不是第一张图片的其余图片都隐藏
setInterval(function(){
i++;
if(i==5)
{
i=0;
}
$(“.bg”).eq(i).show(); //第i个图片显示
$(“.bg”).not(“:eq(“+i+”)”).hide(); //不是第i个图片隐藏
},5000);
})
制作一个有5张图片的轮播图
【分析】
想要制作轮播图,需要如下3个步骤:
1、页面打开之后,第一个图片显示,其余的图片,隐藏
2、图片间隔5秒轮播一次
3、传到第5个图后回到第1张
【制作】
1、页面打开之后,第一个图片显示,其余的图片,隐藏:
$(“.bg”).not(“:eq(0)”).hide();
2、间隔5秒轮播:
Var i=0;
$(function(){
$(“.bg”).not(“:eq(0)”).hide(); //不是第一张图片的其余图片都隐藏
setInterval(function(){
i++;
$(“.bg”).eq(i).show(); //第i个图片显示
$(“.bg”).not(“:eq(“+i+”)”).hide(); //不是第i个图片的隐藏
},5000);
})
3、传到第5个图后回到第1张:
if(i==5)
{
i=0;
}
【完整程序】
Var i=0;
$(function(){
$(“.bg”).not(“:eq(0)”).hide(); //不是第一张图片的其余图片都隐藏
setInterval(function(){
i++;
if(i==5)
{
i=0;
}
$(“.bg”).eq(i).show(); //第i个图片显示
$(“.bg”).not(“:eq(“+i+”)”).hide(); //不是第i个图片隐藏
},5000);
})
相关文章推荐
- 2015-07-23 JQuery第三课(JQuery元素:获取、添加、删除、设置、绑定、显示隐藏、回调函数、动画)
- jquery-mobile
- jquery学习成长记(一)
- JQuery选择器大全
- jquery 实现iframe 自适应高度
- jquery checkbox勾选/取消勾选的诡异问题
- 8款实用的Jquery瀑布流插件
- jQuery静态方法inArray,grep,merge,makeArray方法使用和源码分析
- jquery1.7升级到jquery1.3之后的live怎么使用
- jQuery事件(ready/bind/hover/toggle/unbind/one/trigger/focus/blur/change/live)
- jquery动态创建元素 div元素随垂直滚动条位置变化置顶显示
- jquery插件编写(以折叠面板为例)
- Jquery动态生成的html元素,然后给其中的元素添加样式
- JQuery插件最佳实践
- JQUERY实现网页右下角固定位置展开关闭特效的方法
- jQuery的图像裁剪插件Jcrop
- jquery基础介绍-转
- jquery解除hover事件的绑定方式
- jquery autocomplete中文乱码问题
- jquery easyui datagrid的getSelections问题