<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lbt</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main_wnd #ctrl #nav{
list-style-type: none;
}
#main_wnd{
width: 506px;
height: 500px;
border: solid 1px red;
position: absolute;
}

#main_wnd #content div{
width: 500px;
height: 500px;
position: absolute;
}
#main_wnd #ctrl{
margin-top: 500px;
}
#main_wnd #ctrl li{
float: left;
width: 100px;
height: 30px;
text-align: center;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

</style>
</head>
<body>
<div id="main_wnd">
<div id="content">
<div>第一个</div>
<div>第二个</div>
<div>第三个</div>
<div>第四个</div>
<div>第五个</div>
</div>
<div id="ctrl">
<ul id="nav">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
</ul>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

//将第一个li左边的border加上
$('#main_wnd #ctrl #nav li:first').css('border-left','1px solid #ccc');
//隐藏除了第一个的照片
$('#main_wnd #content div:not(:first)').css('display','none');
var bq = $('#main_wnd #ctrl #nav li');
var content = $('#main_wnd #content div');

//模仿鼠标悬浮在第一个li的情景
bq[0].style.borderTop = '1px solid #fff';

var i = 0;
//计时轮播
setInterval(function(){
$('#main_wnd #ctrl #nav li').css('border-top','1px solid #ccc');
bq[i].style.borderTop = '1px solid #fff';
content.css('display','none');
content[i].style.display = 'block';
i++;
if (i==5) {i=0;}
},2000)

//鼠标悬浮轮播
$('#main_wnd #ctrl #nav').mouseover(function(){
clearInterval();
var tg = event.target;
var idx = $(tg).index();
$('#main_wnd #ctrl #nav li').css('border-top','1px solid #ccc');
tg.style.borderTop = '1px solid #fff';
content.css('display','none');
content[idx].style.display = 'block';
});
</script>

</body>
</html>

用JQ实现的一个简单轮播的更多相关文章

  1. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  2. iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  3. 实现一个图片轮播-3d播放效果

    前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...

  4. JS---案例：简单轮播图

    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...

  5. 基于ionic框架封装一个图片轮播指令的几点

    在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...

  6. （新手向）基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  7. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  8. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

  9. 手把手原生js简单轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

随机推荐

  1. 29_Future模式2_JDK内置实现

    [Future使用场景] Future表示一个可能未完成的一部任务的结果,针对这个结果可以添加CallBack,以便在任务执行成功或失败后作出相应的操作. Future模式非常适合在处理耗时很长的业务 ...

  2. android popupwindow位置显示

    1.在控件的上方: private void showPopUp(View v) { LinearLayout layout = new LinearLayout(this); layout.setB ...

  3. php模拟post提交

    <?php $url = "xxxxx"; // 用户名 $loginName = ''; // 密码 $pwd = ''; // service $serviceName ...

  4. nginx 应用包编译及常用文件配置

    1.zlib wget http://www.zlib.net/fossils/zlib-1.2.8.tar.gz 2.openssl wget http://www.openssl.org/sour ...

  5. javaEE版本的eclipse中导入工程，发现server里面找不到工程，根本发布不了也不能运行

    原文:http://www.cnblogs.com/sxmcACM/p/3674545.html 1.具体解决方法 首先确保,你导入的工程所用的JDK版本和你的机器上安装的版本是同一版本, 如果不同做 ...

  6. Thrift学习笔记—IDL基本类型

    thrift 采用IDL(Interface Definition Language)来定义通用的服务接口,并通过生成不同的语言代理实现来达到跨语言.平台的功能.在thrift的IDL中可以定义以下一 ...

  7. PHP：通过MVC，实现第三方登录（百度）

    这里,仓鼠将手把手记录下来实现第三方登录的流程,这里以百度为例 百度开发者中心-官方网址:传送门. 所有第三方接口都不支持本地调试,只有真实的项目和服务器才有可能申请成功. 所以申请的资料全部都要填写 ...

  8. GO语言（八） defer注意点

    package main import ( "net" "os" "fmt" "io/ioutil" ) func Cl ...

  9. ZT 七大寡头

    网易评论人才辈出啊!!!看下面   http://comment.news.163.com/news_guoji2_bbs/9GRIIJA90001121M.html 关注 关注他的微博yftyfm ...

  10. 分享Spring Scheduled定时器的用法

    摘要:在coding中经常会用到定时器,指定每隔1个小时,或是每天凌晨2点执行一段代码段,若是使用java.util.Timer来做这种事情,未免重复造轮子.幸亏Spring中封装有定时器,而且非常好 ...