<!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. Android学习——文件存储

    在Andriod开发中,文件存储和Java的文件存储类似.但需要注意的是,为了防止产生碎片垃圾,在创建文件时,要尽量使用系统给出的函数进行创建,这样当APP被卸载后,系统可以将这些文件统一删除掉.获取 ...

  2. python 路径练习

    目标: 编写一个程序,能在当前目录以及当前目录的所有子目录下查找文件名包含指定字符串的文件,并打印出相对路径. 代码: import os txt_list = [] # 获取的list def fi ...

  3. 【NLP_Stanford课堂】拼写校正

    在多种应用比如word中都有拼写检查和校正功能,具体步骤分为: 拼写错误检测 拼写错误校正: 自动校正:hte -> the 建议一个校正 建议多个校正 拼写错误类型: Non-word Err ...

  4. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  5. 关于NativeEvent的处理

    nativeEvent(const QByteArray &eventType, void *message, long *result){ chASSERT(message != NULL) ...

  6. XISE菜刀V13.0 官网版 XISE菜刀VIP破解版 XISE官网

    诠释: 1. 破解VIP登陆限制 2.去后门 (自查) 下载地址 :https://pan.baidu.com/s/1eR2rUOM 查毒地址:http://a.virscan.org/a3983f3 ...

  7. imooc课程：Java高并发秒杀API 记录

    Java高并发秒杀API之业务分析与DAO层 Java高并发秒杀API之Service层 Java高并发秒杀API之web层 Java高并发秒杀API之高并发优化 除了并发部分外的这个web开发的总结 ...

  8. Future Research Directions in Social Recommendation

    From the tutorial published by Martin Ester in RecSys 2013 Future Research Directions --Recommendati ...

  9. 自开发Web应用和SAP Customer Data Cloud Identity服务的集成

    今天的文章继续由SAP成都研究院的云时代女王,Aviva给大家分享关于SAP Customer Data Cloud的一些使用经验. Aviva之前的文章可以在本文末尾处获得. 下面是她的正文. 大家 ...

  10. c++新标准的一个问题

    显示转换运算符存在多个兼容版本的时候,explicit 关键字无效,编译器默认会选择那个兼容版本进行转换,而不是报错. 测试环境:gcc4.8.1 示例代码: class plebe { privat ...