图片左右滚动

需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。

前提条件：美工把静态页面写好

HTML代码：

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

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

    ="page_box"span>共@(pager.totalRows)条信息a href="javascript:void(0);" onclick="teacherPage(this,1)">首页a>上一页="javascript:void(0);"><i>@pager.pageb>/@pager.pageCount>页>下一页>尾页>
>

View Code

JS代码：

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

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

    教师团队
    flag=1首页，2上一页，3下一页，4尾页
     teacherPage(obj,flag) {
        var totalPage = 1;
        var page = 1if (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 - 1if (flag == 3 && page < totalPage) { page = page + 1if (flag == 4) { page = totalPage; }

        $.ajax({
            type: "GET" + 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");
            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);
        });
    }

    //判断图片是否可以向左滚动
    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>

View Code

效果图：

标签：前端分页、无刷新分页、js分页