样式部分

    <style type="text/css">
*{margin:;padding:;}
ul,ol{list-style:none;}
#box{width:420px;height:630px;margin:100px auto;position:relative;overflow:hidden;}
#box li{height:630px;width:420px;}
#box ol{position:absolute;z-index:;right:10px;bottom:10px;}
#box ol li{width:20px;height:20px;border-radius:20px;background:#ccc;float:right;margin-left:15px;float:left;}
#box ol li.current{background:#ff0;}
</style>

jqury部分,请引入jquery插件

    <script type="text/javascript">
$(function(){
var index =0;
var timer = setInterval(function(){
index = (index == 2) ? 0 : index + 1;
$("#box ul li").hide().eq(index).show();
$('#box ol li').eq(index).addClass('current').siblings().removeClass('current');
}, 3000);
$("#box ol li").hover(function(){
var index = $(this).index();
$("#box ul li").eq(index).show().siblings().hide();
$(this).addClass('current').siblings().removeClass('current');
})
})
</script>

HTML部分

    <div id="box">
<ul>
<li>
<img src="1.png" alt="" width="420"/>
<p>11111111111</p>
<p>22222222222</p>
<p>33333333333</p>
</li>
<li>
<img src="2.png" alt="" width="420"/>
<p>44444444444</p>
<p>55555555555</p>
<p>66666666666</p>
</li>
<li>
<img src="3.png" alt="" width="420"/>
<p>77777777777</p>
<p>88888888888</p>
<p>99999999999</p>
</li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>

最简单jquery轮播图效果的更多相关文章

  1. jQuery之制作简单的轮播图效果

    [源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

  2. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  3. jQuey实现轮播图效果

    再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片 ...

  4. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  5. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  6. 小程序实践(二):swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  7. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  8. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  9. 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...

随机推荐

  1. 用SourceTree合并工程冲突,工程打不开时的操作

    1.右键工程 --> 显示包内容 2.打开project.pbxproj文件 3.command + F :搜索“<<<<<” 或“>>>> ...

  2. Android 源码解析之AsyncTask

    AsyncTask相信大家都不陌生,它是为了简化异步请求.更新UI操作而诞生的.使用它不仅可以完成我们的网络耗时操作,而且还可以在完成耗时操作后直接的更新我们所需要的UI组件.这使得它在android ...

  3. IOS开发基础知识--碎片4

    十七:返回到主线程进行操作,对UI进行更新只能在主线程进行 /*将数据显示到UI控件,注意只能在主线程中更新UI, 另外performSelectorOnMainThread方法是NSObject的分 ...

  4. 初识java之变量、数据类型和运算符(一)

    博友目标: 1.掌握变量的概念 2.引子----会使用常用数据类型 众所周知,每台电脑都有一个内存这么个必不可少的元素,那么到底内存到底是用来干什么的呢?其实啊,计算机内存相当于人类的大脑,计算机在处 ...

  5. IOS网络请求的一些需要记录的info设置

    info.plist文件: <key>NSExceptionDomains</key> <dict> <key>appapi.700bike.com&l ...

  6. 我是这么给娃娃取名的(使用 node.js )

    依据: 81 命理,需要让五格都为大吉(吉).五格命理请自行谷歌. 我的是单姓复名.姓是固定的. 废话不说,上代码: Array.prototype.contains = function (k) { ...

  7. .NET轻量级RPC框架:Rabbit.Rpc

    最近准备写一个.NET的管理平台应用在公司,由于存在大量的Client => Server,Server => Client的请求需求在加上之前一直接触了解过RpcClient组件的开发, ...

  8. jstorm集群部署

    jstorm集群部署下载 Install JStorm Take jstorm-0.9.6.zip as an example unzip jstorm-0.9.6.1.zip vi ~/.bashr ...

  9. [mysql]三种方法为root账户指定密码

    前言:前段时间把mysql安装后一直没管它,当时就在奇怪为什么mysql登陆不要密码,原来一直用的超用户账户登陆的(简称超级用户) 其实只怪自己太无知,之前一直用的phpbydamin进行的数据库的可 ...

  10. STM32电机控制器小心得

    首先声明的是本人刚刚大学毕业进入电机控制这个行业,以前在学校也做过类似51的实验,然而在工作中发现那些东西是皮毛的不能再皮毛,我现在在公司也算是一个实习生,主要工作是改各厂家对控制器的功能需求,(其实 ...