最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js实现图片左右滚动效果
时间:2017-05-09 编辑:简简单单 来源:一聚教程网
需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同。
前提条件:美工把静态页面写好
HTML代码:
代码如下 | 复制代码 |
@using Models; @{ List PagerModel pager = ViewData["pager"] as PagerModel; }
教师团队@foreach (cms_content teacher in teacherList) {
@teacher.title
@teacher.description
} 共@(pager.totalRows)条信息
|
JS代码:
代码如下 | 复制代码 |
var_lock =false; $(function() { teacherPage(null,null); });//end $ //教师团队 //flag=1首页,2上一页,3下一页,4尾页 functionteacherPage(obj, flag) { vartotalPage = 1; varpage = 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="+newDate().valueOf(), data: { page: page }, success:function(data) { $('#teachers').html(data); sliderImg(); } }); } //滚动图片 functionsliderImg() { $(".products_next").click(function() { if(_lock)return; _lock =true; varul = $(this).parent().find("ul"); if(!canSlider(ul)) { _lock =false;return; } varliFirst = ul.find("li:first"); varmargin = liFirst.width() + 15; varspeed = margin * 3; liFirst.animate({ marginLeft: 0 - margin }, speed); setTimeout(function() { liFirst.remove(); ul.append(" _lock =false; }, speed); }); $(".products_pre").click(function() { if(_lock)return; _lock =true; varul = $(this).parent().find("ul"); if(!canSlider(ul)) { _lock =false;return; } varliLast = ul.find("li:last"); varmargin = liLast.width() + 15; varspeed = margin * 3; ul.prepend(" varliFirst = ul.find("li:first"); liFirst.animate({ marginLeft: 0 }, speed); setTimeout(function() { liLast.remove(); _lock =false; }, speed); }); } //判断图片是否可以滚动 functioncanSlider(ul) { varwidth = 0; ul.find("li").each(function() { varli = $(this); width = width + li.width() + 15; }); if(width <= 710) { returnfalse; } returntrue; } |
效果图:
-
上一个: jquery横向纵向鼠标滚轮全屏切换
-
下一个: jQuery倒计时代码(超简单)
相关文章
- 纯js向上下左右不间断无缝滚动图片的效果 05-07
- 可控制图片左右滚动js代码 09-26
- 图片无缝滚动代码(上下左右)js代码 09-20
- js控制图片左右滚动 09-18
- JS动态可控制左右滚动的图片 02-03
- js特效图片左右滚动效果代码 08-11