浏览 1627 次
|
锁定老帖子 主题：短小简洁的ImageSlider
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-04-15
截图 :
<!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文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
