js实现图片左右滚动效果
作者：秋荷雨翔
本文主要介绍了js实现图片左右滚动效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。
前提条件：美工把静态页面写好
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="~/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>
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) {
$('#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>
效果图：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！