<!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. 微软智能云的核心DNA

    你知道吗? 今天,微软智能云平台运行于全球30个区域,体量超过了两大云服务商亚马逊和谷歌的总和: 今天,在全球范围内超过85%的财富五百强企业都使用了微软Azure云服务,而中国部分的用户也达到了六万 ...

  2. JS获取屏幕分辨率以及当前对象大小等

    <script type="text/javascript"> function getInfo(){ var s = ""; s += " ...

  3. 使用Powershell 管理 Windows 2012 hyper-v复制

    HyperV复制相关命令 Suspend-VMReplication Suspends replication of a virtual machine. 暂停复制虚拟机. Resume-VMRepl ...

  4. Python初学者第二天 用户输入和注释

    2day Python基础语法: 1.用户输入和注释 用户输入:   代码注释:# 注释部分不会被执行,或用来帮助理清代码逻辑   2.数据类型:数字 int:整数   long:长整形  注:Pyt ...

  5. 最短路径-Dijkstra算法与Floyd算法

    一.最短路径 ①在非网图中,最短路径是指两顶点之间经历的边数最少的路径. AE:1    ADE:2   ADCE:3   ABCE:3 ②在网图中,最短路径是指两顶点之间经历的边上权值之和最短的路径 ...

  6. Java 基本IO操作

    1.基本IO操作     有时候我们编写的程序除了自身会定义一些数据信息外,还需要引用外界的数据,或是将自身的数据发送到外界,这时我们需要使用输入与输出. 1)输入与输出       输入:是一个从外 ...

  7. yii2.0查询关联数据以及widgets小部件

    怎样去查询关联数据呢,接下来整理一个简单的代码:

  8. 你不能不知道到的Hook！

    Hook是什么?     hook翻译之后是钩子的意思,hook的用途主要是用来拦截消息的,看到这里大家可能会迷茫,What is a hook?所以这时就不得不普及一下操作系统的原理. 举个例子:假 ...

  9. （原）使用 memcache 使用过程中可能遇到的问题

    在项目优化中,使用到了memcache,刚开始不能用,后来期间总会偶尔抛出异常,刚开始怀疑动态库版本问题,后来尝试了各种替换依旧误解,搞得我日思夜想的,天天惦记着他..=_= 下午拿出半天时间,进行错 ...

  10. non-fragile：oc2.0特性

    Runtime Versions and Platforms There are different versions of the Objective-C runtime on different ...