一个简单的gallery效果
最近比较空闲，想到以前做的项目里面用了jQuery的一个gallery插件，当时还用得不怎么样。现在就做了个简单的gallery效果。
CSS部分：
Code<style type="text/css">
* { margin: 0; padding: 0; }
body { text-align: center; }
#showingPhoto { width: 1024px; height: auto; padding: 10px; border: 1px solid #ccc; margin: auto; position: relative; }
#showingPhoto img { margin: auto; clear: both; }
#photoLst { width: 500px; height: 80px; margin: auto; margin-bottom: 20px; margin-top: 20px; }
#thumbLst { width: 305px; height: 82px; overflow: hidden; border: 1px solid #ccc; margin: 10px; position: relative; }
#photoLst div { float: left; }
#photoLst ul { list-style: none; display: inline; width: auto; height: 82px; text-align: center; position: absolute; left: 0; }
#photoLst ul li { padding: 5px; width: 90px; height: 80px; float: left; display: inline; }
#photoLst ul li img { cursor: pointer; border: 1px solid #ccc; padding: 1px; width: 90px; height: 68px; }
.switchBtn { width: 70px; height: 20px; background: #0a0; color: #fff; cursor: pointer; }
</style>
HTML部分：
Code
<body> <div id="photoLst"> <div id="prevone" class="switchBtn"> Prev</div> <div id="thumbLst"> <ul> </ul> </div> <div id="nextone" class="switchBtn"> Next</div> </div> <div id="showingPhoto"> <img alt="" src="images/loading.gif" /> <div style="clear: both;"> </div> </div></body>
JS部分：
Code<script type="text/javascript">
var PhotoLst = [{ src: "images/gallery/thumb-1.jpg", id: 1 },
{ src: "images/gallery/thumb-2.jpg", id: 2 },
{ src: "images/gallery/thumb-3.jpg", id: 3 },
{ src: "images/gallery/thumb-4.jpg", id: 4 },
{ src: "images/gallery/thumb-5.jpg", id: 5 },
{ src: "images/gallery/thumb-6.jpg", id: 6 },
{ src: "images/gallery/thumb-7.jpg", id: 7 }
];
$(function() {
$.each(PhotoLst, function(i) {
$('#thumbLst>ul').append('<li><img src="' + this.src + '" ref="' + this.src.replace('thumb-', '') + '" /></li>');
});
$('#thumbLst>ul').css('width', 100 * PhotoLst.length + "px");
$('#thumbLst>ul>li>img').css({ "filter": 'alpha(Opacity=50)', "-moz-opacity": '0.5' }).hover(function() {
if (!$(this).hasClass('current')) {
$(this).fadeTo("fast", 1);
}
}, function() {
if (!$(this).hasClass('current')) {
$(this).fadeTo("fast", 0.5);
}
}).click(function() {
if (!$(this).hasClass('current')) {
$('#showingPhoto>img').attr('src', 'images/loading.gif').attr('src', $(this).attr('ref'));
$('#thumbLst>ul>li>img').removeClass('current').fadeTo("fast", 0.5);
$(this).addClass('current').fadeTo("fast", 1);
}
});
$('#thumbLst>ul li:first-child>img').click();
$('#nextone').click(function() {
if (parseInt($('#thumbLst>ul').css('width').replace('px', '')) > parseInt($('#thumbLst').attr('offsetWidth'))) {
if (parseInt($('#thumbLst>ul').css('width').replace('px', '')) > Math.abs(parseInt($('#thumbLst>ul').css('left').replace('px', '')) - parseInt($('#thumbLst').attr('offsetWidth')) * 2 + 14)) {//此处作越界检查
$('#thumbLst>ul').animate({ left: parseInt($('#thumbLst>ul').css('left').replace('px', '')) - parseInt($('#thumbLst').attr('offsetWidth')) + 7 }, 'fast', function() { });
} else {
$('#thumbLst>ul').animate({ left: -(parseInt($('#thumbLst>ul').css('width').replace('px', '')) - parseInt($('#thumbLst').attr('offsetWidth')) + 7) }, 'fast', function() { });
}
}
});
$('#prevone').click(function() {
$('#thumbLst>ul').animate({ left: parseInt($('#thumbLst>ul').css('left').replace('px', '')) + parseInt($('#thumbLst').attr('offsetWidth')) - 7 > 0 ? 0 : parseInt($('#thumbLst>ul').css('left').replace('px', '')) + parseInt($('#thumbLst').attr('offsetWidth')) - 7 }, 'fast', function() { }); //此处作越界检查
});
});
</script>
这个只是一个粗糙的效果，里面很多地方需要细化，代码也需要优化。现在只是记在这里，等以后需要用到的时候方便自己用，到时候需求也会更加明确，就知道该细化哪些部分了。
今天在javaeye上面看到了一篇文章，把jQuery贬得很惨，说它可读性不强，由于我对JS也不熟，所以无法领略作者所说的境界。但是我想我的精力不会放太多在JS上面，所以我现在只要求自己会用，达到想要的效果就OK了，至于什么闭包啊，JS设计模式啊，我还是以后有机会再研究吧，当务之急，是先把C#这门语言掌握好。《CLRViaC#》这本书，我还要多久才能粗略地看完一遍啊，要是有书就好了，不用依赖电脑就能看了。
附件：Gallery代码部分
