@{string templateDirectory = Html.TemplateDirectory();}
<link rel="stylesheet" href="@templateDirectory/plugins/photoSlide/photoSlide.css" />
    <!--滚动看图-->
    <div id="picSlideWrap" class="clearfix">
        <div class="photoSlideimgnav" id="photoSlideimgnav">
            <div id="photoSlideImg">
                @foreach (var item in Model)
                {
                    <img src="@item.Path">
                }
                <div id="photoSlidefront" title="上一张"><a href="javaScript:void(0)" class="pngFix"></a></div>
                <div id="photoSlidenext" title="下一张"><a href="javaScript:void(0)" class="pngFix"></a></div>
            </div>

            <div id="photoSlideCbtn">
                <i class="picSildeLeft"></i>
                <i class="picSildeRight"></i>
                <div id="photoSlideUl">
                    <ul>
                        @foreach (var item in Model)
                        {
                            <li><img src="@item.Thumbnail"><tt></tt></li>
                        }
                    </ul>
                </div>
            </div>
        </div>
    </div><!--end滚动看图-->
    <script>
        $(document).ready(function () {
            var index = 0;
            var length = $("#photoSlideImg img").length;
            var i = 1;

            //关键函数：通过控制i ，来显示图片
            function showImg(i) {
                $("#photoSlideImg img")
                    .eq(i).stop(true, true).fadeIn(800)
                    .siblings("img").hide();
                $("#photoSlideCbtn li")
                    .eq(i).addClass("hov")
                    .siblings().removeClass("hov");
            }

            function slideNext() {
                if (index >= 0 && index < length - 1) {
                    ++index;
                    showImg(index);
                } else {
                    if (confirm("已经是最后一张,点击确定重新浏览！")) {
                        showImg(0);
                        index = 0;
                        aniPx = (length -4) * 142 + 'px'; //所有图片数 - 可见图片数 * 每张的距离 = 最后一张滚动到第一张的距离
                        $("#photoSlideUl ul").animate({ "left": "+=" + aniPx }, 200);
                        i = 1;
                    }
                    return false;
                }
                if (i < 0 || i > length - 4) { return false; }
                $("#photoSlideUl ul").animate({ "left": "-=142px" }, 200)
                i++;
            }

            function slideFront() {
                if (index >= 1) {
                    --index;
                    showImg(index);
                }
                if (i < 2 || i > length + 5) { return false; }
                $("#photoSlideUl ul").animate({ "left": "+=142px" }, 200)
                i--;
            }
            $("#photoSlideImg img").eq(0).show();
            $("#photoSlideCbtn li").eq(0).addClass("hov");
            $("#photoSlideCbtn tt").each(function (e) {
                var str = (e + 1) + "/" + length;
                $(this).html(str)
            })

            $(".picSildeRight,#photoSlidenext").click(function () {
                slideNext();
            })
            $(".picSildeLeft,#photoSlidefront").click(function () {
                slideFront();
            })
            $("#photoSlideCbtn li").click(function () {
                index = $("#photoSlideCbtn li").index(this);
                showImg(index);
            });
            $("#photoSlidenext,#photoSlidefront").hover(function () {
                $(this).children("a").fadeIn();
            }, function () {
                $(this).children("a").fadeOut();
            })
        })
    </script>
