实现底部
图片滚动展示的方法有很多，其中一种常用的方法是使用 jQuery 插件，例如 jQuery EasyUI 中的 panel 和 datagrid 组件。
首先，引入 jQuery 和 jQuery EasyUI 的相关文件：
```html
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.15/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.15/themes/icon.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.15/jquery.easyui.min.js"></script>
```
然后，在 HTML 页面中添加一个 panel 和一个 datagrid 组件：
```html
<div id="panel" class="easyui-panel" style="width:100%;height:100px;">
<table id="datagrid"></table>
</div>
```
接着，在 JavaScript 中初始化 panel 和 datagrid 组件，并设置其属性：
```javascript
$(function(){
// 初始化 panel 组件
$('#panel').panel({
fit: true,
border: false,
style: {padding: 0}
});
// 初始化 datagrid 组件
$('#datagrid').datagrid({
fitColumns: true,
singleSelect: true,
rownumbers: false,
pagination: false,
onLoadSuccess: function(data){
autoScroll();
}
});
// 添加
图片数据
var data = [
{id: 1, name: '
图片1', url: '
img/1.jpg'},
{id: 2, name: '
图片2', url: '
img/2.jpg'},
{id: 3, name: '
图片3', url: '
img/3.jpg'},
{id: 4, name: '
图片4', url: '
img/4.jpg'},
{id: 5, name: '
图片5', url: '
img/5.jpg'},
{id: 6, name: '
图片6', url: '
img/6.jpg'}
];
// 加载
图片数据
$('#datagrid').datagrid('loadData', data);
});
// 自动
滚动
function autoScroll(){
var index = 0;
var maxIndex = $('#datagrid').datagrid('getRows').length - 1;
setInterval(function(){
$('#datagrid').datagrid('selectRow', index);
if(index == maxIndex){
index = 0;
}else{
index++;
}
}, 2000);
}
```
最后，添加一些 CSS 样式来美化
滚动图片的效果：
```css
#datagrid{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: none;
}
.datagrid-header, .datagrid-toolbar, .datagrid-pager{
display: none;
}
.datagrid-view{
padding: 0;
overflow: hidden;
}
.datagrid-view2{
overflow: hidden;
}
.datagrid-body{
overflow: hidden;
}
.datagrid-btable{
margin: 0;
padding: 0;
}
.datagrid-cell{
padding: 0;
text-align: center;
vertical-align: middle;
}
.datagrid-cell
img{
cursor: pointer;
max-height: 100%;
max-width: 100%;
margin: auto;
}
```
以上就是使用 jQuery EasyUI 实现底部
图片滚动展示的方法。在这个例子中，我们使用了 datagrid 组件来
展示图片，并通过 JavaScript 实现了自动
滚动的效果。具体实现过程中，还可以根据实际需要进行一些修改和优化。
扫一扫
719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
