截图 :
<!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>
分享到：
相关推荐
8. **易于操作**：界面简洁，操作直观，即使对于新手用户来说也极易上手。 9. **ScrSelfPlayer**：此软件还附带了一个内置的播放器ScrSelfPlayer，用于播放由ScreenExe录制的视频文件，提供了便捷的回放功能。 10....
6. **用户界面**：简洁易用的界面能提升用户体验。投票界面应清晰显示每个选项，并提供提交按钮。 7. **结果统计与展示**：系统应能实时或定期统计投票结果，并以图表或其他形式展示，便于用户理解和分析。 8. **...
"SQL经典短小代码收集"是一个集合，旨在整理和分享那些高效、简洁的SQL代码片段，这些片段通常能够解决特定的数据库问题或优化查询性能。下面，我们将详细探讨SQL的一些核心概念以及这些经典代码可能涵盖的各个方面...
标题中的“j2me 短小手机游戏代码”指的是基于Java 2 Micro Edition (J2ME)平台开发的小型手机游戏源代码。J2ME是Java为移动设备和嵌入式设备提供的一种轻量级运行环境，尤其适用于早期功能手机上的应用开发，包括...
短小经典搞笑语录大全.doc
【短小的Web服务器】 在IT领域，"短小的Web服务器"通常指的是小型、轻量级的HTTP服务器软件，它们被设计用于处理简单的HTTP请求，适用于开发、测试或者教育目的。这种类型的服务器通常体积小，运行速度快，资源消耗...
门诊短小手术麻醉风险管理.pdf
### SQL经典短小代码知识点详解 #### 固定列数的行列转换 在这个知识点中，主要探讨了如何将数据从一种格式（长格式）转换到另一种格式（宽格式）。具体而言，原始数据按照学生的科目成绩分列存储，而转换后的数据...
C#语法简洁明了，具有丰富的类库和强大的.NET框架支持，非常适合进行系统级别的编程，如我们这里要做的定时关机程序。 要实现定时关机，我们需要利用非托管代码，即Windows API（应用程序接口）。API是操作系统提供...
标题中的“精简短小的桌面清理软件”指的是一个轻量级的应用程序，设计用于整理和清理用户计算机桌面。这类软件通常体积小巧，不会占用大量系统资源，却能有效地帮助用户整理桌面上的文件、快捷方式和无用图标，使...
这个“sql教程短小精炼容易上手”的资源显然是为初学者设计的，旨在以简洁明了的方式引导用户快速掌握SQL的基本概念和操作。下面将详细阐述SQL的核心知识点，以及如何通过21天的学习来逐步理解并运用它们。 1. **...
如果你是程序员，可能会喜欢像Flameshot这样的开源截图工具，它在Linux环境下尤其受欢迎，具有简洁的界面和强大的编辑功能。 总之，实现PC截图功能的方法多种多样，从操作系统自带的工具到第三方软件，再到在线服务...
【低成本高效率高技术轻薄短小的产品制造】 在现代科技产业中，追求产品的低成本、高效率和高技术含量已经成为一种普遍趋势。特别是在半导体行业中，轻薄短小的产品设计不仅能满足消费者对便携性和功能性的需求，也...
【文档标题】提到的是“短小的自我介绍范文精选”，主要涵盖了个人自我介绍的写作技巧和实例。在自我介绍中，个人的特点、能力和态度通常是非常关键的元素。 【描述】指出该文档是一份关于自我介绍的精选范文，适用...
短小却令人惊叹的javascript代码 本文中，我们将介绍三个短小却令人惊叹的JavaScript代码，分别是数组去重、在数组中找出最小值（或者最大值）和交换两个变量的值。这些代码可以帮助我们在项目开发过程中解决一些...
标题中的“机械臂的控制源码，短小而精悍”揭示了这是一个关于机械臂控制程序的源代码，特点是代码量不大但效率高，易于理解和分析。这通常意味着开发者已经优化了代码，使得核心功能得以高效实现，对于初学者或者...
为适应井下实际生产的需要,对原有的DSJ80可伸缩带式输送机进行短小化改造,将原有的外置驱动及减速器更换为驱动滚筒一体式的内置驱动,内置电驱动滚筒靠机尾端储带仓固定,游动小车靠卸载臂端移动实现紧带,同时实现回转...
在"简单工厂模式实例，短小，精简"这个描述中，我们可以预期这是一个简化版的示例，它清晰地展示了工厂模式的三大角色和基本工作流程。通过分析"EFT"这个具体的子文件，我们可以进一步理解这个模式在实际问题中的...