需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。

前提条件：美工把静态页面写好

HTML代码：

teacherList = ViewData["teacherList"] as List; //春雨树频道 PagerModel pager = ViewData["pager"] as PagerModel; }

Box">

教师团队

@foreach (cms_content teacher in teacherList) {

Box">

@teacher.title

@teacher.description

Box">

item in teacher.imgList) {

}

Box"> 共@(pager.totalRows)条信息 @pager.page/@pager.pageCount页

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; }

效果图：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！

js图片左右滚动效果 js实现图片滚动效果 js左右滚动效果

js实现图片左右滚动效果

HTML代码：

教师团队

JS 代码：

效果图：

相关文章

js实现图片左右滚动效果

HTML代码：

教师团队

JS代码：

效果图：

相关文章

JS 代码：