html实现图片自动滚动效果,js实现图片左右滚动效果
需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。
前提条件：美工把静态页面写好
HTML代码：
@using Models;
@{
List teacherList = ViewData[“teacherList”] as List; //春雨树频道
PagerModel pager = ViewData[“pager”] as PagerModel;
}
教师团队
@foreach (cms_content teacher in teacherList)
{
![t1.png][]
@teacher.title
@teacher.description
![left.png][t1.png]
![right.png][t1.png]
@foreach (Tuple item in teacher.imgList)
{
![@item.Item1][t1.png]
}
}
共@(pager.totalRows)条信息
首页
上一页
@pager.page**/@pager.pageCount**页
下一页
尾页
JS代码：
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(“
“ + liFirst.html() + “”);
_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(“
“ + liLast.html() + “”);
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;
}
效果图：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
[t1.png]:
男娘i
Myth丶恋晨
爱被打了一巴掌
红太狼
还没有评论，来说两句吧...