js实现图片左右滚动效果

@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>

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