html实现图片自动滚动效果,js实现图片左右滚动效果

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

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

HTML代码：

@using Models;

@{

List teacherList = ViewData["teacherList"] as List; //春雨树频道

PagerModel pager = ViewData["pager"] as PagerModel;

}

教师团队

@foreach (cms_content teacher in teacherList)

{

@teacher.title

@teacher.description

@foreach (Tuple item in teacher.imgList)

{

}

}

共@(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;

}

效果图：

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