需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同。
前提条件:美工把静态页面写好
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="/UploadFiles/2021-04-02/t1.png">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" + 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>效果图:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- Merryland《Merryland》[FLAC/分轨][170.22MB]
- 庄锭欣 ELKIE《没有你的未来》[320K/MP3][15.78MB]
- 庄锭欣 ELKIE《没有你的未来》[FLAC/分轨][36MB]
- TchaikovskySwanLake,Op.20柴可夫斯基天鹅湖(2013)SACD[Hi-Res]
- 24bit达人艺典《琴歌终极版》整轨WAV+CUE
- 黑鸭子.2005-《发烧DSD》柏菲[WAV分轨]
- 群星.1990-电影看板·人间道【宝丽金】【WAV+CUE】
- 周殷廷.2024-TO.WHOM.IT.MAY.CONCERN【环球】【FLAC分轨】
- 草蜢.1997-三人世界精选17首【宝丽金】【WAV+CUE】
- 【古琴音乐】管平湖《广陵散》2004[FLAC+CUE]
- 【中国民乐】《少数民族器乐·苗岭的早晨》2004[WAV+CUE]
- 【中国音乐】盛中国《新疆之春》2004[FLAC+CUE]
- 群星《音你而来 第8期》[320K/MP3][44.64MB]
- 群星《音你而来 第8期》[FLAC/分轨][121.21MB]
- 群星《十二女声Ⅲ》[WAV/CUE/分轨][626.4MB]