Javascript Jquery自定义图像库

我写了一个复杂的代码（因为我不是专家）来制作一个画廊。。但我想做得更简单些。。下面是我的代码：

这是按钮：

<div class="pic1">Image1</div>
<div class="pic2">Image2</div>
<div class="pic3">Image3</div>

Image1
图2
图3

这是每幅图像的关键点：

<div class="PicsHolder">

<div id="pic1" style="padding: 2px; margin: auto;">
<img src="image_gallery/1.jpg" alt="" width="100%" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here!!!
<div style="clear:both;"></div>
</div>
</div>


<div id="pic2" style="padding: 2px; margin: auto; display: none;">
<img style="margin: 0 auto;" src="image_gallery/2.jpg" alt="" width="100%" border="0" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here Image 2!!!
<div style="clear:both;"></div>
</div>
</div>


<div id="pic3" style="padding: 2px; margin: auto; display: none;">
<img style="margin: 0 auto;" src="image_gallery/3.jpg" alt="" width="100%" border="0" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here Image 3!!!
<div style="clear:both;"></div>
</div>
</div>

</div>

这里有一些文字！！！
图2中的一些文字！！！
图3中的一些文字！！！

还有我的JAvascript（以及复杂的部分）

$（文档）.ready（函数（）{
var myString=window.location.href；
var-finals=myString[myString.length-1]；
如果（总决赛==“”）{
$（“#pic2”）.hide（）；
$（“#pic3”）.hide（）；
美元(pic1).法代因(fast);；
}
如果（总决赛=“1”）{
$（“#pic2”）.hide（）；
$（“#pic3”）.hide（）；
美元(pic1).法代因(fast);；
}
如果（总决赛=“2”）{
$（“#pic1”）.hide（）；
$（“#pic3”）.hide（）；
$（#pic2”）.fadeIn（“快速”）；
}
如果（总决赛=“3”）{
$（“#pic1”）.hide（）；
$（“#pic2”）.hide（）；
$（#pic3”）.fadeIn（“快速”）；
}
});
首先，您可以考虑使用循环使支持的图像数量更具动态性。您还可以重新访问html，并使用
ul>li
作为每个幻灯片的容器，以简化您的标记。我不得不说，您在一定程度上正在重新发明轮子。有很多jquery插件可以满足您的需求。例如
<script type="text/javascript">
$(document).ready(function() {
            var myString = window.location.href;
            var finals = myString[myString.length - 1];
            if (finals == "") {
                $("#pic2").hide();
                $("#pic3").hide();
                $("#pic1").fadeIn("fast");
            }
            if (finals == "1") {
                $("#pic2").hide();
                $("#pic3").hide();
                $("#pic1").fadeIn("fast");
            }
            if (finals == "2") {
                $("#pic1").hide();
                $("#pic3").hide();
                $("#pic2").fadeIn("fast");
            }
            if (finals == "3") {
                $("#pic1").hide();
                $("#pic2").hide();
                $("#pic3").fadeIn("fast");
            }
});
</script)



<script type="text/javascript">
$(document).ready(function() {
            var currentURL = window.location.href;
            var p1 = "?id=1";
            var p2 = "?id=2";
            var p3 = "?id=3";

            var p1url = window.location.href + p1;
            var p2url = window.location.href + p2;
            var p3url = window.location.href + p3;

            $(".pic1").click(function() {
                $("#pic2").hide();
                $("#pic3").hide();
                $("#pic4").hide();
                window.location.href = p1url;
                $("#pic1").fadeIn("fast");
            });
            $(".pic2").click(function() {
                $("#pic1").hide();
                $("#pic3").hide();
                window.location.href = p2url;
                $("#pic2").fadeIn("fast");
            });
            $(".pic3").click(function() {
                $("#pic1").hide();
                $("#pic2").hide();
                window.location.href = p3url;
                $("#pic3").fadeIn("fast");
            });
});
</script>