html实现图片自动滚动效果,js实现图片左右滚动效果 曾经终败给现在 2022-10-05 12:44 260阅读 0赞 需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同。 前提条件:美工把静态页面写好 HTML代码: @using Models; @\{ List teacherList = ViewData\["teacherList"\] as List; //春雨树频道 PagerModel pager = ViewData\["pager"\] as PagerModel; \} # 教师团队 # @foreach (cms\_content teacher in teacherList) \{ ![t1.png][] ## @teacher.title ## @teacher.description ![left.png][t1.png] ![right.png][t1.png] @foreach (Tuple item in teacher.imgList) \{ ![@item.Item1][t1.png] \} \} 共@(pager.totalRows)条信息 首页 上一页 *@pager.page***/@pager.pageCount**页 下一页 尾页 JS代码: 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(" " + liFirst.html() + ""); \_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(" " + liLast.html() + ""); 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; \} 效果图: ![7fc432d6d71945609fbfdba29ce48328.png][] 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家! [t1.png]: [7fc432d6d71945609fbfdba29ce48328.png]: /images/20221005/245a101b239b4cf6a531141fb26f5cb8.png
还没有评论,来说两句吧...