以前用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下的轮播的更多相关文章

  1. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  2. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  3. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  4. jquery实现导航图轮播

    版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...

  5. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  6. 自适应图片宽度的jQuery焦点幻灯轮播代码

    自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示   XML/HTML Code <div id="sli ...

  7. jQuery补充，基于jQuery的bxslider轮播器插件

    基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...

  8. （转）jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery五屏轮播手风琴切换代码

    jQuery五屏轮播手风琴切换代码 在线演示本地下载

随机推荐

  1. javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure

    SSL握手失败:用JDK1.8做发邮件的功能遇到这种问题处理方式是:将目录 %JAVA_HOME%\...\jre\lib\security里的local_policy.jar,US_export_p ...

  2. linux 查看目录所在的分区

    df -h /data2 Filesystem Size Used Avail Use% Mounted on /dev/xvda1 20G .5G 12G % /

  3. 与你相遇好幸运，用sinopia搭建npm私服

    需求: >在企业内部搭建私有npm服务器,企业开发人员上传下载自己开发的npm包 >私有npm服务器包不存在时,找npm或者taobao的镜像站点 >服务器硬盘有限,希望只缓存下载过 ...

  4. Python ToDo List

    这是我在学习python过程中,想做又没来得及做的事情一览.最初只有寥寥几个字,我会尽力去消化,让它不会只增不减. 由于博客园奇怪的算法,明明是一篇非常没有含量的东西(连字数都没有达到),居然能荣登p ...

  5. 【Java EE 学习 71 下】【数据采集系统第三天】【分析答案实体】【删除问题】【删除页面】【删除调查】【清除调查】【打开/关闭调查】

    一.分析答案实体 分析答案实体主要涉及到的还是设计上的问题,技术点几乎是没有的.首先需要确定一下答案的格式才能最终确定答案实体中需要有哪些属性. 答案格式的设计是十分重要的,现设计格式如下: 在表单中 ...

  6. Jquery判断变量是否为空

    var aaa=''; if(aaa) { //aaa不为空也不是不可识别对象时执行 } else { //aaa为空或不可识别时执行 } aaa必须是变量,对象的属性好像是不行,

  7. JAVA中MAP值保持顺序不变

    今天在进行JAVA开发过程中,因需要使用MAP来存放数据,同时希望MAP中KEY的顺序与放入顺序保持一致. 在使用HashMap之后,发现KEY的顺序是乱序的,每次打印还不太一样.上网查询资料之后发现 ...

  8. MySQL深度巡检

    1. IO层面检查   (1)IO检查   查看%util是否接近100%定位是哪个磁盘IO压力大 #iostat -x 1 10 (2)iotop定位负载来源进程 查看哪个PID占用IO最高 #io ...

  9. tomcat实现域名访问步骤

    1.找到tomcat的主目录,进入conf文件夹,找到server.xml文件,并打开: 2.修改tomcat的监听端口为80端口: 3.将内容中的 localhost 替换成你想修改的IP地址或者域 ...

  10. XACML学习

    学习的网站: http://www.cinlk.com/2015/07/27/xacml/ http://www.cinlk.com/2015/08/22/swiftabac/ http://blog ...