圖片左右滾動 - s0611163－IT工程師數位筆記本

文章出處

需求：頁面顯示教師信息列表，列表中每一條數據顯示圖片滾動插件，每張圖片的長寬及長寬比例各不相同。

前提條件：美工把靜態頁面寫好

HTML代碼：

@using Models;
@{
    List<cms_content> teacherList = ViewData["teacherList"] as List<cms_content>; //春雨樹頻道
    PagerModel pager = ViewData["pager"] as PagerModel;
}

<div class="teacherteam_box">
    <h1>教師團隊</h1>
    @foreach (cms_content teacher in teacherList)
    {
        <div class="teacher_box">
            <div class="teacher_img fl">
                <img src="~/@teacher.imgUrl" />
            </div>
            <div class="teacher_infor fl">
                <h2>@teacher.title</h2>
                <p>
                    @teacher.description
                </p>
                <div class="products_box">
                    <div class="products_pre">
                        <img src="~/Theme/images/left.png" />
                    </div>
                    <div class="products_next">
                        <img src="~/Theme/images/right.png" />
                    </div>
                    <div class="div-imgbox">
                        <ul>
                            @foreach (Tuple<string, string> item in teacher.imgList)
                            {
                                <li>
                                    <img alt="@item.Item1" src="@item.Item2" style="height:221px;" />
                                </li>
                            }
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    }

    <div class="page_box">
        <span>共@(pager.totalRows)條信息</span>
        <a href="javascript:void(0);" onclick="teacherPage(this,1)">首頁</a>
        <a href="javascript:void(0);" onclick="teacherPage(this,2)">上一頁</a>
        <a href="javascript:void(0);"><i>@pager.page</i><b>/@pager.pageCount</b>頁</a>
        <a href="javascript:void(0);" onclick="teacherPage(this,3)">下一頁</a>
        <a href="javascript:void(0);" onclick="teacherPage(this,4)">尾頁</a>
    </div>
</div>

View Code

JS代碼：

<script type="text/javascript">
    var _lock = false;

    $(function () {
        teacherPage(null, null);
    });//end $

    //教師團隊
    //flag=1首頁，2上一頁，3下一頁，4尾頁
    function teacherPage(obj, flag) {
        var totalPage = 1;
        var page = 1;
        if (obj) {
            page = parseInt($(obj).parent().find("i").text());
            totalPage = parseInt($(obj).parent().find("b").text().replace("/", ""));
        }
        if (flag == 1) { page = 1; }
        if (flag == 2 && page > 1) { page = page - 1; }
        if (flag == 3 && page < totalPage) { page = page + 1; }
        if (flag == 4) { page = totalPage; }

        $.ajax({
            type: "GET",
            url: "@Url.Content("~/")home/teachers?t=" + new Date().valueOf(),
            data: { page: page },
            success: function (data) {
                $('#teachers').html(data);
                sliderImg();
            }
        });
    }

    //滾動圖片
    function sliderImg() {
        $(".products_next").click(function () {
            if (_lock) return;
            _lock = true;
            var ul = $(this).parent().find("ul");
            if (!canSlideLeft(ul)) { _lock = false; return; }
            var liFirst;
            var liArr = ul.find("li");
            for (var i = 0; i < liArr.length; i++) {
                if ($(liArr[i]).css("margin-left").indexOf("-") == -1) {
                    liFirst = $(liArr[i]);
                    break;
                }
            }
            var margin = liFirst.width() + 15;
            var speed = margin * 3;
            liFirst.animate({
                marginLeft: 0 - margin
            }, 500);
            setTimeout(function () {
                _lock = false;
            }, 500);
        });
        $(".products_pre").click(function () {
            if (_lock) return;
            _lock = true;
            var ul = $(this).parent().find("ul");
            if (!canSlideRight(ul)) { _lock = false; return; }
            var liLast;
            var liArr = ul.find("li");
            for (var i = liArr.length - 1; i >= 0; i--) {
                if ($(liArr[i]).css("margin-left") && $(liArr[i]).css("margin-left").indexOf("-") != -1) {
                    liLast = $(liArr[i]);
                    break;
                }
            }
            var margin = liLast.width() + 15;
            var speed = margin * 3;
            liLast.animate({
                marginLeft: 0
            }, 500);
            setTimeout(function () {
                _lock = false;
            }, 500);
        });
    }

    //判斷圖片是否可以向左滾動
    function canSlideLeft(ul) {
        var width = 0;
        ul.find("li").each(function () {
            var li = $(this);
            if (!li.css("margin-left") || li.css("margin-left").indexOf("-") == -1) {
                width = width + li.width() + 15;
            }
        });
        if (width <= 710) {
            return false;
        }
        return true;
    }

    //判斷圖片是否可以向右滾動
    function canSlideRight(ul) {
        var bl = false;
        ul.find("li").each(function () {
            var li = $(this);
            if (li.css("margin-left") && li.css("margin-left").indexOf("-") != -1) {
                bl = bl || true;
            }
        });
        return bl;
    }
</script>