时间:2021-07-01 10:21:17 帮助过:26人阅读
需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同。
前提条件:美工把静态页面写好
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="~/Theme/images/t1.png" /> </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" /> </li> } </ul> </div> </div> </div> <div class="clear"></div> </div> } <div class="page_box"> <span>共@(pager.totalRows)条信息</span> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="teacherPage(this,1)">首页</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="teacherPage(this,2)">上一页</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i>@pager.page</i><b>/@pager.pageCount</b>页</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="teacherPage(this,3)">下一页</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="teacherPage(this,4)">尾页</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("/", "")); } 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 style='margin-left:-" + margin + "px; '>" + 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>
效果图:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!