Question

我写了一个复杂的代码（因为我不是专家）来管理一个画廊..但我想做的更简单..贝娄是我的代码：

这是按钮：

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

这是每张图片：

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

和我的JAvascript（以及复杂的部分）

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

是否有可能更简单地完成所有这些jquery代码？
有没有可能让它变得更有活力？我的意思是，如果我想添加更多图像像这样：

Here Image 2中的一些文字!!!

我用来计算图像并生成其余代码的jquery代码？

问候！

Jquery自定义图库

0 个答案: