我想添加一个功能,使轮播在短时间内不断变化。我无法找到仅使用 jQuery 的解决方案。
在 Kendo 网站上查看代码:https://demos.telerik.com/kendo-ui/scrollview/events
我查看并找到了 vue js 和 Angular 的automaticViewChangeInterval,但在 jquery 上没有找到任何内容
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/scrollview/events">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example" style="margin:auto; width:70%">
<div id="scrollView" style="width: 660px; height: 420px; max-width: 100%; margin: auto;">
<div class="photo photo1" data-role="page">
</div><div class="photo photo2" data-role="page">
</div><div class="photo photo3" data-role="page">
</div><div class="photo photo4" data-role="page">
</div><div class="photo photo5" data-role="page">
</div><div class="photo photo6" data-role="page">
</div><div class="photo photo7" data-role="page">
</div><div class="photo photo8" data-role="page">
</div><div class="photo photo9" data-role="page">
</div><div class="photo photo10" data-role="page">
</div>
</div>
<script>
$(document).ready(function () {
function onChange(e) {
kendoConsole.log("page " + e.nextPage);
}
function onRefresh(e) {
kendoConsole.log("Total: " + e.pageCount + " Current: " + e.page);
}
$("#scrollView").kendoScrollView({
enablePager: true,
contentHeight: "100%",
change: onChange,
refresh: onRefresh
});
});
</script>
</div>
<style>
#scrollview-home .photo {
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.photo1 {
background-image: url("../content/shared/images/photos/11.jpg");
}
.photo2 {
background-image: url("../content/shared/images/photos/12.jpg");
}
</style>
<div class="kd-example-console">
<div class="header">
<span class="title">CONSOLE LOG</span>
<span class="clear kd-text-secondary">Clear log</span>
</div>
<div class="console"></div>
</div>
</body>
</html>