<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<script src = "jquery.js"></script>

<style>

    .slider-bar{

    	overflow: hidden;

    }

	li{

		width:100px;

		float: left;

		height: 50px;

		text-align: center;

		line-height: 50px;

		cursor: pointer;

		list-style: none;

	}

	.slider-cont{

		width:100px;

		height:100px;

		line-height: 100px;

		text-align: center;

		font-size: 20px;

	}

	.slider-block{

		float:left;

		display: none;

		width:100px;

		height:100px;

		background:#dd1e2e;

	}

</style>

</head>

<body>

    <div class="slider" id ="slider">

    	<div class="slider-bar">

    		<ul>

    			<li>first</li>

    			<li>second</li>

    		</ul>

    	</div>

    	<div class="slider-cont">

    		<div class="slider-block" style="display:block">1</div>

    		<div class="slider-block">2</div>

    	</div>

    </div>

    <div class="slider" id="slider">

    	<div class="slider-bar">

    		<ul>

    			<li>first</li>

    			<li>second</li>

    		</ul>

    	</div>

    	<div class="slider-cont">

    		<div class="slider-block" style="display:block">1</div>

    		<div class="slider-block">2</div>

    	</div>

    </div>

</body>

</html>
<script>

	(function($){

		$.fn.slider = function(options){

			var defaults = {

				background1:"#ccc",

				background2:"#ddd"

			};

			var opt = $.extend({},defaults,options);

			return this.each(function(){

				$(this).find("li").bind("click",function(){

					var _index = $(this).index();

					var _slider = $(this).closest("div").next().find(".slider-block");

					_slider.eq(0).css("background",opt.background1)

					_slider.eq(_index).show().siblings().hide();

				})

			})

		}

	})(jQuery)

	$(function(){

		$(".slider").slider();

		$(".slider").slider();

	})

</script>

　　

jquery简单切换插件的更多相关文章

  1. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  2. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

  3. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  4. FlexSlider是一个非常出色的jQuery滑动切换插件

    FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...

  5. jQuery banner切换插件

    今天学写了一个基于jQuery焦点图切换插件,有不对的地方还请多多指教,不多说下面是代码: 1.引jQuery库 <script src="http://code.jquery.com ...

  6. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  7. jQuery简单倒计时插件

    一. 效果预览 二. 实现 1. 按照特定的类结构布局. 2. 需要先引入jQuery,再引入此文件. /** * Author: CC11001100 * * 简单倒计时 * * 1. 支持页面内同 ...

  8. jquery简单的插件

    $(function() { $.fn.插件名称 = function(options) { var defaults = { Event : "click", //触发响应事件 ...

  9. jQuery简单日历插件版

    先来看demo:http://codepen.io/jonechen/pen/xOgZMz 插件代码: ; (function($) { var Calendar = function(ele, op ...

随机推荐

  1. SuperSocket学习笔记（一）

    这是根据我自己学习的经历整理出来的,如有不对之处,还请多多指教! SuperSocket源码下载 SuperSocket文档 安装并启动Telnet 学习方法: QuickStrart + 文档 参考 ...

  2. 模型 Model

    模型层包含所有视图或控制器不包含的应用程序逻辑 模型应该包含所有应用程序业务逻辑和数据库访问逻辑 主要部分 bll和dal 例如,使用ado.net或者ef5.0访问sql数据库的代码

  3. js 计算两个日期之间的月数

    //返回两个日期相差的月数 function MonthsBetw(date1, date2) { //用-分成数组 date1 = date1.split("-"); date2 ...

  4. C#设置按钮三态背景图片

    1.闪电事件,注意添加手动或者点击按钮->属性中的闪电->下面对应各种事件 在上面: private void button1_MouseHover(object sender, Even ...

  5. 【原创】C++中对象的序列化

    1.对象序列化 对象的序列化是指将对象的状态信息转换为可以存储或者传输的形式的过程.对象的反序列化是与序列化相反的过程. 在序列化期间,对象将其当前的状态写入到临时或者永久性的存储区,可以通过从存储区 ...

  6. <Win32_5>深入浅出Win32的计时器

    说起时间,对于我们搞IT的人来说,那是要多重要有多重要.我觉得有价值的时间是给有抱负和有才能的人准备的,因为他们会充分利用,不会让时间失望…… 呵呵,有点儿说远了,还是回归主题吧 Win32的计时器其 ...

  7. 在Eclipse中运行Nutch2.3

    参考http://wiki.apache.org/nutch/RunNutchInEclipse 一.环境准备 1.下载nutch2.3源代码 wget http://mirror.bit.edu.c ...

  8. Python爬虫学习：三、爬虫的基本操作流程

    本文是博主原创随笔,转载时请注明出处Maple2cat|Python爬虫学习:三.爬虫的基本操作与流程 一般我们使用Python爬虫都是希望实现一套完整的功能,如下: 1.爬虫目标数据.信息: 2.将 ...

  9. Effective Java2读书笔记-类和接口（一）

    第13条:使类和成员的可访问性最小化 设计良好的模块的模块与设计不好的模块区别在于,设计良好的模块会隐藏所有的实现细节,把它的API与他的实现清晰地隔离开来.然后模块之间只通过API通信. 信息隐藏之 ...

  10. 《Programming WPF》翻译 第5章 1.不使用样式

    原文:<Programming WPF>翻译 第5章 1.不使用样式 作为一个样式如何使其在WPF使用的例子,,让我们看一下TTT简单的实现,如示例5-1. 示例5-1 <!-- W ...