时间:2021-05-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>效果图:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了js控制多图左右滚动切换效果。分享给大家供大家参考。具体如下:这是一款纯js实现点击左右按钮图片自动左右平滑滚动,默认5个一组左右滚动,可以手动修
我们会看到很多的网站上会使用多张图片无缝滚动的效果。下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动。1.
在上一篇用JS实现图片轮播效果代码(一)的基础上,增加了左右箭头的响应事件,实现了点击左右箭头也可以让图片滚动:js代码如下:window.onload=fun
本文实例讲述了微信小程序实现图片滚动效果。分享给大家供大家参考,具体如下:效果:左右滑动可以切换展示图片代码:pages/test/test.js:Page({
用jquery封装了一个控制图片左右滚动的插件,有左右按钮可以点击实现图片滚动效果。代码如下:slide*{padding:0;margin:0;list-st