如何用java让两张图片循环显示

第一步、打开eclipse软件，如图所示：

第二步、点击菜单栏File--New---Dynamic Web Project,如图所示：

第三步、输入项目名，然后点击Next按钮，如图所示：

第四步、继续点击Next按钮，如图所示：

第五步、勾选Generate web.xml deployment descriptor,然后点击Finish按钮，如图所示：

第六步、选中项目的WebContent文件夹鼠标右键New--->JSP File文件，如图所示：

输入JSP文件名，点击Next按钮，如图所示：

第八步、继续选中html5,然后点击Finish按钮，如图所示：

第九步、引入layui前端框架开发依赖包，然后再jsp文件中键入完整代码：

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>如何用java让两张图片循环显示</title>

 <meta name="renderer" content="webkit">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="css/layui.css"  media="all">

  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

</head>

<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

  <legend>填充轮播元素 - 以图片为例</legend>

</fieldset>    

<div class="layui-carousel" id="test10">

  <div carousel-item="">

    <div><img src="img/1.webp"></div>

    <div><img src="img/2.webp"></div>

  </div>

</div>

<script src="js/layui.all.js" charset="utf-8"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>

layui.use(['carousel', 'form'], function(){

  var carousel = layui.carousel

  ,form = layui.form;

  //常规轮播

  carousel.render({

    elem: '#test1'

    ,arrow: 'always'

  });

  //改变下时间间隔、动画类型、高度

  carousel.render({

    elem: '#test2'

    ,interval: 1800

    ,anim: 'fade'

    ,height: '120px'

  });

  //设定各种参数

  var ins3 = carousel.render({

    elem: '#test3'

  });

  //图片轮播

  carousel.render({

    elem: '#test10'

    ,width: '778px'

    ,height: '440px'

    ,interval: 5000

  });

  //事件

  carousel.on('change(test4)', function(res){

    console.log(res)

  });

  var $ = layui.$, active = {

    set: function(othis){

      var THIS = 'layui-bg-normal'

      ,key = othis.data('key')

      ,options = {};

      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 

      options[key] = othis.data('value');

      ins3.reload(options);

    }

  };

  //监听开关

  form.on('switch(autoplay)', function(){

    ins3.reload({

      autoplay: this.checked

    });

  });

  $('.demoSet').on('keyup', function(){

    var value = this.value

    ,options = {};

    if(!/^\d+$/.test(value)) return;

    options[this.name] = value;

    ins3.reload(options);

  });

  //其它示例

  $('.demoTest .layui-btn').on('click', function(){

    var othis = $(this), type = othis.data('type');

    active[type] ? active[type].call(this, othis) : '';

  });

});

</script>

</body>

</html>

第十步、把项目部署到Tomcat并启动，如图所示：

第十一步、在浏览器中输入地址访问项目：http://localhost:8080/Demo02/index.jsp

可以看到两张图片循环显示的效果，如图所示：