需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同。
前提条件:美工把静态页面写好
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>页>下一页>尾页> >
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>
效果图:
标签:前端分页、无刷新分页、js分页
原文地址:https://www.cnblogs.com/s0611163
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。