需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。
前提条件：美工把静态页面写好
HTML代码：
@using Models; @{ List<cms_content> teacherList = ViewData["teacherList"] as List<cms_content>; //春雨树频道 PagerModel pager = ViewData["pager"] as PagerModel; } <div> <h1>教师团队</h1> @foreach (cms_content teacher in teacherList) { <div> <div> <img src="https://www.jb51.net/~/Theme/images/t1.png" /> </div> <div> <h2>@teacher.title</h2> <p> @teacher.description </p> <div> <div> <img src="https://www.jb51.net/~/Theme/images/left.png" /> </div> <div> <img src="https://www.jb51.net/~/Theme/images/right.png" /> </div> <div> <ul> @foreach (Tuple<string, string> item in teacher.imgList) { <li> <img alt="@item.Item1" src="https://www.jb51.net/@item.Item2" /> </li> } </ul> </div> </div> </div> <div></div> </div> } <div> <span>共@(pager.totalRows)条信息</span> <a href="javascript:void(0);">首页</a> <a href="javascript:void(0);">上一页</a> <a href="javascript:void(0);" ><i>@pager.page</i><b>/@pager.pageCount</b>页</a> <a href="javascript:void(0);">下一页</a> <a href="javascript:void(0);">尾页</a> </div> </div>
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("https://www.jb51.net/", "")); } 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 (!canSlider(ul)) { _lock = false; return; } var liFirst = ul.find("li:first"); var margin = liFirst.width() + 15; var speed = margin * 3; liFirst.animate({ marginLeft: 0 - margin }, speed); setTimeout(function () { liFirst.remove(); ul.append("<li>" + liFirst.html() + "</li>"); _lock = false; }, speed); }); $(".products_pre").click(function () { if (_lock) return; _lock = true; var ul = $(this).parent().find("ul"); if (!canSlider(ul)) { _lock = false; return; } var liLast = ul.find("li:last"); var margin = liLast.width() + 15; var speed = margin * 3; ul.prepend("<li>" + liLast.html() + "</li>"); var liFirst = ul.find("li:first"); liFirst.animate({ marginLeft: 0 }, speed); setTimeout(function () { liLast.remove(); _lock = false; }, speed); }); } //判断图片是否可以滚动 function canSlider(ul) { var width = 0; ul.find("li").each(function () { var li = $(this); width = width + li.width() + 15; }); if (width <= 710) { return false; } return true; } </script>
效果图：
