短小简洁的ImageSlider

最新推荐文章于 2023-06-15 14:32:48 发布
最新推荐文章于 2023-06-15 14:32:48 发布
阅读量268 收藏
点赞数
分类专栏： JavaScript练习 文章标签： jQuery JavaScript XHTML CSS J# ViewUI

截图 :

 

<!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>

 

iteye_3846
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DevExpress中imageSlider的使用说明（实现图片轮播效果）
CoffeMilk的博客
05-07 1788
一、imageSlider功能说明 控件的LayoutMode属性取值范围如下： TopLeft、TopCenter、TopRight、MiddleLeft、MiddleCenter、MiddleRight、BottomLeft、BottomCenter、BottomRight，为将图片停靠的八个方向上 Stretch，表示拉伸到撑满全图片 ZoomInside，表示图片等比例放大，当有两边恰好撑满容器时，停止放大 ZoomOutside，表示图片等比例放大，当
image-slider-js：使用html，css和javascript的图像滑块
02-17
image-slider-js 使用HTML，CSS和JavaScript的图像滑块
图像浏览控件ImageSlider
可乐鸡翅
07-07 5441
ImageSlider 图像浏览控件 with two click-able navigation elements that are visible when hovered. To display images in an ImageSlider, add them to the ImageSlider.Images collection. See the example below
关于AndroidImageSlider的使用
凌京的专栏
07-29 1457
这次介绍一下我们android的常用图片滑动的第三方库，AndroidImageSlider的使用，功能很丰富的库，封装了各种动画，我们简单调用即可，那么，如何上手，其实官网已经有了详细的介绍，我只是拿过来做一个小demo，分享下使用心得： 首先在我们的gradle中去添加依赖： dependencies { compile "com.android.support:support-v
image-slider:pictures图片的图片滑块组件
04-05
React图像滑块 演示： : 安装 npm install @ madzadev / image - slider 用法 import Player from "@madzadev/image-slider" ; import "@madzadev/image-slider/dist/index.css" ; const images = [ { url : "https://picsum.photos/seed/a/1600/900" } , { url : "https://picsum.photos/seed/b/1920/1080" } , { url : "https://picsum.photos/seed/c/1366/768" } , ] ; < Slider imageList = { images } width = { 1000 } heigh
简洁短小的 JavaScript IE 浏览器判定代码
12-11
这个目前世界上最短的 Javascript 判定 IE 浏览器的方法来自俄罗斯！它已经在各版本的 IE 以及目前其他流行的浏览器上经过测试，基于 IE 的 Bug，微软虽然已经意识到，但是从来没有纠正过。 代码如下: [removed] var...
SQL经典短小代码收集
05-30
"SQL经典短小代码收集"是一个集合，旨在整理和分享那些高效、简洁的SQL代码片段，这些片段通常能够解决特定的数据库问题或优化查询性能。下面，我们将详细探讨SQL的一些核心概念以及这些经典代码可能涵盖的各个方面...
j2me 短小手机游戏代码
08-12
标题中的“j2me 短小手机游戏代码”指的是基于Java 2 Micro Edition (J2ME)平台开发的小型手机游戏源代码。J2ME是Java为移动设备和嵌入式设备提供的一种轻量级运行环境，尤其适用于早期功能手机上的应用开发，包括...
screenExe免费短小的录视频软件
03-19
8. **易于操作**：界面简洁，操作直观，即使对于新手用户来说也极易上手。 9. **ScrSelfPlayer**：此软件还附带了一个内置的播放器ScrSelfPlayer，用于播放由ScreenExe录制的视频文件，提供了便捷的回放功能。 10....
C#的DevExpress的winform学习
itzhangzx的博客
06-15 5472
C# DevExpress winform
ImageSlider-开源
04-26
ImageSlider =“ Slide Puzzle”。表面上有8x6的可滑动按钮。每个按钮可容纳一个给定图像的一个子图像。这些按钮可以混合使用，并且玩家需要通过滑动子图像按钮来重新排列图像。
image-slider:轻巧，可完全自定义的图像滑块，具有开箱即用的多种功能
05-15
流 轻巧，完全可自定义的图像滑块 主要特征 轻的 添加您的自定义过渡效果 使用ECMAScript构建，没有jQuery 图像持续时间的进度条 支持视频 触摸友好 垂直和水平滑动模式 特殊的3D插件 入门 安装 第一步是使用yarn或npm安装它 npm install @baianat/flow # or use yarn yarn add @baianat/flow 包括必要的文件 < head > < link rel =" stylesheet " href =" dist/css/flow.css " > </ head > < body > ... < script type =" text/javascript " src =" dist/js/flow.js " > </ script > </ body > HTML标记 为了轻松自定义，您必须在F
DevExpress ImageSlider+GridControl 简单的图片查看器（晨曦CZB）
03-08
DevExpress ImageSlider+GridControl 简单的图片查看器（晨曦CZB）,整个发上来，可以直接运行
典型Socket演示程序
07-09
一个基于MFC对话框的Socket应用程序，包括UDP/TCP/FTP协议的实现，及字符串和数据流两种传输模式，值得研究一下。
ImageSlider
10-10
整理的一些关于Android动画，有例如缩放，翻页，百叶窗等等
DEVExpress-ImageSlider 的使用
只会写HelloWorld的专栏
03-09 855
官网的例子大概使用步骤： 1新建窗体应用 2加DEVExpress 的引用 3 拖拽一个ImageSlider控件到窗体上 4 非常重要的一步:需要这是ImageSlider控件的VirtualMoe为True，默认是False 5需要自己添加一些事件响应代码，就是在设计视图，点击控件，选择代码中对应的事件，和事件处理函数对应起来。 6 运行起来了。 个人感觉这个控件挺好的，没有鼠标的时候，左右的两个小箭头都隐藏了，还不错。 using System; using System..
ImageSlider使用体会
DreamerJane
12-09 1197
为了实现Banner，找了很多都没有成功实现。AndroidImageSlider不仅简单方便，用起来也很好，所以记录一下以防忘记 github地址：https://github.com/daimajia/AndroidImageSlider 一、gradle文件中添加 dependencies {         compile "com.android.support:supp
Ideal-image-slider 幻灯片实例演示
weixin_33904756的博客
08-09 100
链接：http://zaixianshouce.iteye.com/blog/2316300 http://www.shouce.ren/study/api/s/jq--5733e32bf23bb--index2.html 在线实例 实例演示 默认效果 实例演示 淡入淡出 实例演示 带链接 实例演示 项目导航 实例演示 带标题描述 实例演示 回调函数 实例演示 自定义切换 实例...
DevExpress中文说明--TdxImageSlider（图片轮播控件）
GuoGuoABC
02-26 972
TdxImageSlider Object HierarchyPropertiesMethodsEvents 一个图片轮播组件。 UnitdxImageSlider Syntax TdxImageSlider = class(TdxCustomImageSlider) Description 触摸屏支持:　终端用户可以用单指平移滑动图像。 TdxImageSlider Properties（属性） TdxImageSliderLege...
Python静态短小爱心代码
最新发布
06-21
在Python中，静态短小的爱心代码通常用来表达编程者对代码的热爱和对他人友好的精神。这些代码可能不是非常实用，但它们通常是有趣的、简洁的，并且能够展示Python语言的一些特点。以下是一个简单的例子，使用字符...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值