短小简洁的ImageSlider

最新推荐文章于 2024-09-15 08:20:45 发布

最新推荐文章于 2024-09-15 08:20:45 发布 · 315 阅读

文章标签：

#jQuery #JavaScript #XHTML #CSS #J# #ViewUI

JavaScript练习专栏收录该内容

17 篇文章

订阅专栏

截图 :

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