js实现图片左右滚动效果       本文主要介绍了js实现图片左右滚动效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧

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

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

HTML代码：

@using Models;
 List cms_content teacherList = ViewData["teacherList"] as List cms_content //春雨树频道
 PagerModel pager = ViewData["pager"] as PagerModel;
 div 
 h1 教师团队 /h1 
 @foreach (cms_content teacher in teacherList)
 div 
 div 
 img src="~/Theme/images/t1.png" / 
 /div 
 div 
 h2 @teacher.title /h2 
 @teacher.description
 div 
 div 
 img src="~/Theme/images/left.png" / 
 /div 
 div 
 img src="~/Theme/images/right.png" / 
 /div 
 div 
 @foreach (Tuple string, string item in teacher.imgList)
 img alt="@item.Item1" src="@item.Item2" / 
 /li 
 /ul 
 /div 
 /div 
 /div 
 div /div 
 /div 
 div 
 span 共@(pager.totalRows)条信息 /span 
 a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 首页 /a 
 a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 上一页 /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" 下一页 /a 
 a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"  /a 
 /div 
 /div 

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 t=" + new Date().valueOf(),
 data: { page: page },
 success: function (data) {
 $('#(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();
 () + " /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;
 () + " /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 

效果图：

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