jQuery下的轮播
以前用js做过轮播 今天用JQ
插件是最基本的 在官网可以下
布局:
<body>
<div id="div1">
<ul id="lunbo">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
<ul id="ul1">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
样式:
<style style="text/css">
#div1{
position:absolute;
width:400px;
height:200px;
border:1px solid red;
margin-left:300px;
overflow:hidden;
}
#lunbo{
position:absolute;
margin-left:-40px;
margin-top:0px;
}
#lunbo li{
display:none;
}
li{
list-style:none;
float:left;
}
img{
width:400px;
height:200px;
float:left;
position:absolute;
z-index:-1;
}
#ul1{
margin-left:80px;
margin-top:150px;
}
#ul1 li{
list-style:none;
width:20px;
height:20px;
border-radius:50%;
background-color:blue;
text-align:center;
margin-left:10px;
}
#ul1 .active{
background-color:yellow;
}
</style>
JQ:
<script>
$(function(){
//自动轮播 利用定时器实现,
//定时器的回调函数中 利用角标每次自增(index) ,(数字下表和图片的角标是相同的)
//让$("#lunbo li")角标也为index的元素显示 同时其同胞元素隐藏
//为ul1中的角标为index的li添加active样式同时去除其它同辈元素active的样式
$("#lunbo li").eq(0).show();
index=0;
t=setInterval(lunbo,1000);
function lunbo(){
index++;
if(index>=$("#lunbo li").length){index=0;}
$("#lunbo li:eq("+index+")").show().siblings().hide();
$("#ul1 li:eq("+index+")").addClass("active").siblings().removeClass("active");
}
//手动轮播 为$("#ul1 li")绑定鼠标移入事件
//获取当前$("#ul1 li")的下标
//让$("#lunbo li")角标也为index的元素显示 同时其同胞元素隐藏
//为ul1中的角标为index的li添加active样式同时去除其它同辈元素active的样式
$("#ul1 li").mouseover(function(){
index=$("#ul1 li").index(this);
$("#lunbo li:eq("+index+")").show().siblings().hide();
$("#ul1 li:eq("+index+")").addClass("active").siblings().removeClass("active");
})
//鼠标移入时 清除定时器 移出时重新自动轮播
$("#div1").hover(function(){
clearInterval(t);
},function(){
t=setInterval(lunbo,2000);
})
});
</script>
jQuery下的轮播的更多相关文章
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- jquery实现导航图轮播
版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- 自适应图片宽度的jQuery焦点幻灯轮播代码
自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示 XML/HTML Code <div id="sli ...
- jQuery补充,基于jQuery的bxslider轮播器插件
基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...
- (转)jquery实现图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery五屏轮播手风琴切换代码
jQuery五屏轮播手风琴切换代码 在线演示本地下载
随机推荐
- JS获取URL参数
$(function () { var action = getUrlParam("action"); alert(action) }); //根据URL中的参数获取值 funct ...
- PhpStorm 快捷键大全 PhpStorm 常用快捷键和配置
PhPStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,PhpStorm可随时帮助用户对其编码进行调整,运行单元测试或者提供可视化debug功能.Phpstrom的一款名 ...
- Delphi容器类之---Tlist,TStringlist,THashedStringlist的效率比较
转载自:http://www.ylzx8.cn/windows/delphi/73200.html 本人在做一个测试,服务器是IOCP的,我假定最大链接数是50000个. 测试背景:如果每个链接之间的 ...
- CSS3 Loading(加载)动画效果
1.html 部分 <div class="spinner"> <div class="rect1"></div> < ...
- 删除流氓软件McAfee
如何解决卸载McAfee时出现"处于托管模式时无法删除"问题 问题现象: 这几天在为客户终端换装杀毒软件时出现这么一个问题:在控制面板的添加或删除程序里面将"McAfee ...
- 修改cmd的字体为Consolas字体
Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe] ...
- linux简单命令
查看服务器开启的进程信息[root@CentOSHT ~]# top 其中第一行的 Load average 参数是服务器负载的意思,
- display:inline-block的间隙问题和解决办法
1.display:inline-block在水平方向的间隙: 代码如下: <style type="text/css"> *{margin:0; padding:0; ...
- 单片机与控制实验(2)——LED点阵显示屏
一.实验目的和要求 了解LED点阵显示的基本原理和实现方法.掌握点阵汉字库的编码和从标准字库中提取汉字编码的方法. 二.实验设备 单片机测控实验系统 LED点阵显示器实验模块 Keil开发环境 STC ...
- DOM性能瓶颈与Javascript性能优化
这两天比较闲,写了两篇关于JS性能缺陷与解决方案的文章(<JS特性性能缺陷及JIT的解决方案>,<Javascript垃圾回收浅析>),主要描述了untyped,GC带来的问题 ...