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

曾经终败给现在 2022-10-05 12:44 305阅读 0赞

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

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

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;

效果图：

![7fc432d6d71945609fbfdba29ce48328.png][]

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

[t1.png]: 
[7fc432d6d71945609fbfdba29ce48328.png]: /images/20221005/245a101b239b4cf6a531141fb26f5cb8.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML标签marquee实现滚动效果

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

相关实现文字滚动效果

相关 flex滚动字幕和图片效果

相关 vue实现图片滚动（类似走马灯效果）

相关 js实现内容滚动效果

相关 swiper.js插件实现图片滚动效果

相关 js鼠标滚轮滚动图片切换效果

相关 JS实现新闻播报滚动效果

相关 js实现图片无缝滚动