|
|
截图 :
<!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> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡