<!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. 【Udacity】异常值检测/删除

    Outlier Detection

  2. css层叠性和继承性

    1.了解css层叠性 层叠性是什么?就是解决处理css选择器和属性冲突的能力.css的选择器权重是分大小,就是当多个选择器都选中了同一个标签时,听谁的??? 标签选择器 < 类选择器 < ...

  3. 面向对象之property

    property功能 以调用数据属性的方式(不用加括号)调用方法 方法定义成数据属性(方法本应该是动词) # 定义property之前 class People: def __init__(self, ...

  4. mvn 打包命令

    mvn install & package:package是把jar打到本项目的target下,而install时把target下的jar安装到本地仓库,供其他项目使用. mvn clean ...

  5. beifencode

    package com.hesheng.myapplication; import android.content.Context;import android.graphics.Bitmap;imp ...

  6. Java API 常用 详解

    Runtime类的使用:可以查看内存信息,系统变量,执行系统软件命令,备份数据库相关操作

  7. 如何避免在EF自动生成的model中的DataAnnotation被覆盖掉

    摘自ASP.NET MVC 5 网站开发之美 6.4 Metadata与数据验证 如果使用Database-First方式生成*.edms,那么所生成的类文件会在*.tt文件的层级之下,扩展名tt是一 ...

  8. Oracle 12C pluggable database自启动

    实验环境创建了两个PDB,本实验实现在开启数据库时,实现pluggable database PDB2自启动: 原始环境: SQL> shu immediateDatabase closed.D ...

  9. Windows Server 2008 安装wampserver失败的总结

    1.最好选择2.4以下版本. 2.如果报确实MSVCR100.dll的错误,需要下载运行环境包(参考博客)

  10. 百度地图Label 样式 setStyle

    最近一直在整百度地图,发现一个小问题: 创建文本标注对象设置样式的时候,其中的backgroundColor属性居然还支持透明啊,不过改变数值好像对效果没有影响 var numLabel = new ...