js实现图片左右滚动效果

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

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

超文本标记语言代码：

@使用模型；@ { Listcms _ content教师列表=查看数据['教师列表']作为Listcms _ content//春雨树频道页面模型页导航=查看数据['页导航']作为页面模型；}div class='teacherteam_box' h1教师团队/h1 @ foreach(CMS _ content教师列表中的教师){ div class=' teacher _ box ' div class=' teacher _ img fl ' img src=' http : ~/Theme/images/t1。png '/div class=' teacher _ infor fl ' h2@teacher.title/h2 p @ teacher。描述/p div class=' products _ box ' div class=' products _ pre ' img src=' http 3360 ~/Theme/images/left。png '/div class=' products _ next ' Item 1 ' src=' http : @ Item .项目2 '/Li }/ul/div/div/class=' clear '/div/div } div class=' page _ box ' span共@(寻呼机。合计行)条信息/span a href=' JAVAScript : void(0)；rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' onclick='教师页面(this，1)'首页/a a href=' JAVAScript : void(0)；rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' onclick='教师页面(this，2)'上一页/a a href=' JAVAScript : void(0)；rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部诺弗洛i@pager.page/i/@pager.pageCount页/a a href=' JAVAScript : void(0)；rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' onclick='教师页面(this，3)'下一页/a a href=' JAVAScript : void(0)；rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' onclick='教师页面(this，4)'尾页/a /div/divJS代码：

脚本类型=' text/JavaScript ' var _ lock=false；$(function () { teacherPage(null，null)；});//end $ //教师团队//标志=1首页，2上一页，3下一页，4尾页函数示教页面(obj，flag){ var total page=1；var page=1；if (obj) { page=parseInt($(obj)).父项()。查找(“我”).text())；totalPage=parseInt($(obj).父项()。查找(' b ').文本()。替换('/',' ');} if(flag==1){ page=1；} if(flag==2 page 1){ page=page-1；} if(flag==3页TotalPage){ page=1页；} if(flag==4){ page=TotalPage；} $.ajax({ type: 'GET '，url: ' @ Url .内容(' ~/')家/老师？t='新日期()。valueOf()，data: { page: page }，success:函数(数据){ $(' #教师').html(数据);slide rimg()；} });} //滚动图片函数sliderImg() { $(' .产品_下一个').单击(函数(){ if (_lock)返回；_lock=真；var ul=$(这个)。父项()。find(' ul ')；if(！canSlider(ul)){ _ lock=false；返回；} var LIfirst=ul。查找('李：首')；var margin=Lifirst。宽度()15；变化速度=余量* 3;首先。动画({左边距：0-margin }，速度);setTimeout(函数(){ Lifirst。移除()；ul。附加(' Li ' Lifirst)。html()'/Li ')；_ lock=false}，速度);});$('.products _ pre’).单击(函数(){ if (_lock)返回；_lock=真；var ul=$(这个)。父项()。find(' ul ')；if(！canSlider(ul)){ _ lock=false；返回；} var Lilast=ul。查找('李：最后')；var保证金=Lilast。宽度()15；变化速度=余量* 3;ul。前置(' Li style=' margin-left :-' margin ' px；“莉拉斯特。html()"/Li ')；var LIfirst=ul。查找('李：首')；首先。动画({左边距： ^ 0 }，速度);setTimeout(函数(){ Lilast。移除()；_ lock=false}，速度);});} //判断图片是否可以滚动函数can滑块(ul){ var width=0；ul.find('li ').每个(function(){ var Li=$(this)；宽度=宽度Li。宽度()15；});if(width=710){ return false；}返回true}/脚本效果图：

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