<!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. Python爬虫教程-17-ajax爬取实例（豆瓣电影）

    Python爬虫教程-17-ajax爬取实例(豆瓣电影) ajax: 简单的说,就是一段js代码,通过这段代码,可以让页面发送异步的请求,或者向服务器发送一个东西,即和服务器进行交互 对于ajax: ...

  2. <meta name="renderer" content="webkit">

    <meta name="renderer" content="webkit"> 当前国内的大部分主流浏览器(如360)基本都是双核浏览器,所谓双核即 ...

  3. 在win7 windows 上编译 beego 上传到 linux 去执行

    在beego的项目目录下,执行: GOOS=linux GOARCH=amd64 go build So easy!但是却搞了好久! 参考连接:http://blog.csdn.net/changji ...

  4. Mysql学习---基础操作学习2

    基本数据类型 Mysql基本数据类型:二进制,数值[整数,小数].字符串[定长,变长]. 二进制数据.时间和枚举集合 bit[(M)] 二进制位(101001),m表示二进制位的长度(1-64),默认 ...

  5. How to alter department in PMS system

    question:How to alter department in PMS system 1.Use  generally method modified department: update e ...

  6. Maven学习总结(一)——pom.xml文件配置详解

    <build>标签:<plugins>给出构建过程中所用到的插件 <plugins> <plugin> <groupId>org.apach ...

  7. 设计模式：享元（FlyWeight）模式

    设计模式:享元(FlyWeight)模式 一.前言     享元(FlyWeight)模式顾名思义,既是轻量级的,原因就是享元,共享元素,这里的元素指的是对象.如何共享对象,那就是在检测对象产生的时候 ...

  8. DQN核心思想理解

    看过Deep learning(convolutional neural network),看过RL(Q-learning).但是在两者结合这一块一直弄不明白. 我的疑问在于一直不明白DL是怎样识别出 ...

  9. Intellij IDEA 开启自动保存功能

    IntelljJ IDEA关于文件自动保存功能主要有两种方式: 切换到其他应用时保存变化(默认使能) 设置路径:Settings >> Apperance & Behavior & ...

  10. newcoder NOIP提高组模拟赛C题——保护

    我是发了疯才来写这道题的 我如果用写这道题的时间去写dp,我估计我能写上三四道 可怕的数据结构题 题目 这道题的鬼畜之处在于实在是不太好写 我们看到要求离树根尽量的近,所以我们很容易就能想到树上倍增, ...