js实现图片左右滚动效果

前端之家收集整理的这篇文章主要介绍了js实现图片左右滚动效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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">
Box">
    @foreach (Tuple item in teacher.imgList) {
  • @item.Item1
  • }
}
Box"> 共@(pager.totalRows)条信息 @pager.page/@pager.pageCount

JS代码

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

    效果图:

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

    猜你在找的JavaScript相关文章