`
ziyuewang
  • 浏览: 40113 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

短小简洁的ImageSlider

阅读更多

截图 :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
			.image-slider {
				padding : 0px ;
				margin : 0 auto ;
				margin-top : 60px ;
				width : 370px ;
				overflow : hidden ;
				border : 0px solid #ccc ;
				position : relative ;
			}
			.image-slider div.photos {
				padding : 0px ;
				margin : 0px ;
				width : 370px ;
				height : 180px ;
			}
			.image-slider div.photos a {
				padding : 0px ;
				margin : 0px ;
				width : 370px ;
				height : 180px ;
				display : none ;
			}
			.image-slider div.photos a img {
				padding : 0px ;
				margin : 0px ;
				width : 370px ;
				height : 180px ;
				border : none  ;
			}
			.image-slider div.nums {
				padding : 0px ;
				margin : 0px ;
				overflow : hidden ;
				position : absolute ;
				right : 0px ;
				bottom : 0px ;
			}
			.image-slider div.nums span {
				padding : 0px ;
				margin-right : 10px ;
				margin-bottom : 10px ;
				width : 22px ;
				height : 22px ;
				line-height : 22px ;
				font-size : 13px ;
				font-family : arial ;
				display : block ;
				border : 1px solid #ff0033 ;
				text-align : center ;
				float : left ;
				text-decoration : none ;
				background : #fff ;
				cursor : pointer ;
			}
			.active {
				color : brown ;
				font-weight : bold ;
			}
			div#foo {
			
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				var config = {
					renderTo : "foo" ,
					photos : [
						"jquery.png","code_1.png","code_2.png","code_3.png","code_4.png"
					] ,
					nums : [
						"1","2","3","4","5"
					] ,
					current : "1"
				} ;
				ImageSlider.load(config) ;
			}) ;
			
			var ImageSlider = function(){
				function load(config){
					var renderTo = $(document.getElementById(config.renderTo)) ;
					var photos = config.photos ;
					var nums = config.nums ;
					var current = parseInt(config.current) ;
					if(current >= photos.length){
						current = 1 ;
					}
					_render(renderTo,photos,nums) ;
					_setCurrent(current) ;
				} ;
				function _render(renderTo,photos,nums){
					var _renderTo = renderTo.addClass("foo") ;
					var imageSlider = $("<div></div>")
								.addClass("image-slider")
								.appendTo(_renderTo) ;
					var _photos = $("<div></div>")
								.addClass("photos")
								.appendTo(imageSlider) ;
					var _nums = $("<div></div>")
								.addClass("nums")
								.appendTo(imageSlider) ;
					for(var j=0;j<photos.length;j++){
						var photo = "img/" + photos[j] ;
						var _a = $("<a href='###'></a>").appendTo(_photos) ;
						var _img = $("<img />")
								.attr("src",photo)
								.appendTo(_a) ;
					}
					for(var k=0;k<nums.length;k++){
						var num = nums[k] ;
						var _span = $("<span></span>")
								.html(num)
								.appendTo(_nums) ;
						_click(_span,k) ;
					}
					
				} ;
				function _click(jq,index){
					jq.click(function(){
						_slide(index,$(this)) ;
					}) ;
				} ;
				function _slide(index,jq){
					var photos = jq.parents(".image-slider").find(".photos > a").hide() ;
					photos.eq(index).show() ;
					jq.parent().find("span").removeClass("active") ;
					jq.addClass("active") ;
				} ;
				function _setCurrent(current){
					var imageSlider = $(".image-slider").find(".photos > a").eq(current).show() ;
					$(".nums span").eq(current).addClass("active") ;
				} ;
				return {
					load : load
				} ;
			}() ;
		</script>
	</head>
	<body>
		<div id="foo"></div>
	</body>
</html>

 

分享到:
评论

相关推荐

    screenExe免费短小的录视频软件

    8. **易于操作**:界面简洁,操作直观,即使对于新手用户来说也极易上手。 9. **ScrSelfPlayer**:此软件还附带了一个内置的播放器ScrSelfPlayer,用于播放由ScreenExe录制的视频文件,提供了便捷的回放功能。 10....

    短小的投票系统

    6. **用户界面**:简洁易用的界面能提升用户体验。投票界面应清晰显示每个选项,并提供提交按钮。 7. **结果统计与展示**:系统应能实时或定期统计投票结果,并以图表或其他形式展示,便于用户理解和分析。 8. **...

    SQL经典短小代码收集

    "SQL经典短小代码收集"是一个集合,旨在整理和分享那些高效、简洁的SQL代码片段,这些片段通常能够解决特定的数据库问题或优化查询性能。下面,我们将详细探讨SQL的一些核心概念以及这些经典代码可能涵盖的各个方面...

    j2me 短小手机游戏代码

    标题中的“j2me 短小手机游戏代码”指的是基于Java 2 Micro Edition (J2ME)平台开发的小型手机游戏源代码。J2ME是Java为移动设备和嵌入式设备提供的一种轻量级运行环境,尤其适用于早期功能手机上的应用开发,包括...

    短小经典搞笑语录大全.doc

    短小经典搞笑语录大全.doc

    短小的web服务器

    【短小的Web服务器】 在IT领域,"短小的Web服务器"通常指的是小型、轻量级的HTTP服务器软件,它们被设计用于处理简单的HTTP请求,适用于开发、测试或者教育目的。这种类型的服务器通常体积小,运行速度快,资源消耗...

    门诊短小手术麻醉风险管理.pdf

    门诊短小手术麻醉风险管理.pdf

    SQL经典短小代码

    ### SQL经典短小代码知识点详解 #### 固定列数的行列转换 在这个知识点中,主要探讨了如何将数据从一种格式(长格式)转换到另一种格式(宽格式)。具体而言,原始数据按照学生的科目成绩分列存储,而转换后的数据...

    短小强悍的C#定时关键程序

    C#语法简洁明了,具有丰富的类库和强大的.NET框架支持,非常适合进行系统级别的编程,如我们这里要做的定时关机程序。 要实现定时关机,我们需要利用非托管代码,即Windows API(应用程序接口)。API是操作系统提供...

    精简短小的桌面清理软件

    标题中的“精简短小的桌面清理软件”指的是一个轻量级的应用程序,设计用于整理和清理用户计算机桌面。这类软件通常体积小巧,不会占用大量系统资源,却能有效地帮助用户整理桌面上的文件、快捷方式和无用图标,使...

    sql教程短小精炼容易上手

    这个“sql教程短小精炼容易上手”的资源显然是为初学者设计的,旨在以简洁明了的方式引导用户快速掌握SQL的基本概念和操作。下面将详细阐述SQL的核心知识点,以及如何通过21天的学习来逐步理解并运用它们。 1. **...

    不需要QQ不需要微信也能实现pc截图功能,短小强悍

    如果你是程序员,可能会喜欢像Flameshot这样的开源截图工具,它在Linux环境下尤其受欢迎,具有简洁的界面和强大的编辑功能。 总之,实现PC截图功能的方法多种多样,从操作系统自带的工具到第三方软件,再到在线服务...

    低成本高效率高技术轻薄短小的产.ppt

    【低成本高效率高技术轻薄短小的产品制造】 在现代科技产业中,追求产品的低成本、高效率和高技术含量已经成为一种普遍趋势。特别是在半导体行业中,轻薄短小的产品设计不仅能满足消费者对便携性和功能性的需求,也...

    短小的自我介绍范文精选.doc

    【文档标题】提到的是“短小的自我介绍范文精选”,主要涵盖了个人自我介绍的写作技巧和实例。在自我介绍中,个人的特点、能力和态度通常是非常关键的元素。 【描述】指出该文档是一份关于自我介绍的精选范文,适用...

    短小却令人惊叹的javascript代码.docx

    短小却令人惊叹的javascript代码 本文中,我们将介绍三个短小却令人惊叹的JavaScript代码,分别是数组去重、在数组中找出最小值(或者最大值)和交换两个变量的值。这些代码可以帮助我们在项目开发过程中解决一些...

    机械臂的控制源码,短小而精悍

    标题中的“机械臂的控制源码,短小而精悍”揭示了这是一个关于机械臂控制程序的源代码,特点是代码量不大但效率高,易于理解和分析。这通常意味着开发者已经优化了代码,使得核心功能得以高效实现,对于初学者或者...

    DSJ80可伸缩带式输送机短小化技术改造及应用

    为适应井下实际生产的需要,对原有的DSJ80可伸缩带式输送机进行短小化改造,将原有的外置驱动及减速器更换为驱动滚筒一体式的内置驱动,内置电驱动滚筒靠机尾端储带仓固定,游动小车靠卸载臂端移动实现紧带,同时实现回转...

    简单工厂模式实例,短小,精简

    在"简单工厂模式实例,短小,精简"这个描述中,我们可以预期这是一个简化版的示例,它清晰地展示了工厂模式的三大角色和基本工作流程。通过分析"EFT"这个具体的子文件,我们可以进一步理解这个模式在实际问题中的...

Global site tag (gtag.js) - Google Analytics