js实现图片左右滚动效果

网络编程 2025/1/13 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

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

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>



效果图：



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