js底部图片滚动展示

实现底部图片滚动展示的方法有很多，其中一种常用的方法是使用 jQuery 插件，例如 jQuery EasyUI 中的 panel 和 datagrid 组件。

首先，引入 jQuery 和 jQuery EasyUI 的相关文件：

<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 组件：

<div id="panel" class="easyui-panel" style="width:100%;height:100px;">
  <table id="datagrid"></table>
</div>

接着，在 JavaScript 中初始化 panel 和 datagrid 组件，并设置其属性：

$(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 样式来美化滚动图片的效果：

#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 实现了自动滚动的效果。具体实现过程中，还可以根据实际需要进行一些修改和优化。