JSP中<li>标签怎样从数据库中动态获取数据

1你在jsp中嵌入java代码，在java代码里写for循环，循环产生你从数据库里面拿到的数据显示在li上
<%java代码%><%=java变量%>
2用jstl标签c:forEach
<c:forEach items="后台传过来的变量集合" var="变量">
<li>${变量}</li>
</c:forEach>

我们都知道，轮播图组件模板结构通常是 ul包裹li 的结构，在vue中，li的数量也通常是由后端接口返回的数据决定。所以封装轮播图组件，在搭建完基本的结构之后，首先就要获取到渲染模板的数据。

如果轮播图组件是单独封装的组件，那么后端接口的数据是通过自定义属性由父组件传递过来的，所以在这里我们只需要通过props接收数据即可，之后将数据遍历渲染在模板中。

①结构搭建

②数据的准备与使用

结构中的li和span标签是需要遍历渲染的，所以需要v-for循环数据，而数据需要在props中定义，供模板使用（sliders:数据；autoPlay：是否自动播放；duration：切换的间隔时间）

③显示是通过给添加类名实现，css样式 就是默认都是透明度为0，然后将当前的透明度改为1，权重也是1--------我们要搞清楚，其实每个都被遍历摆在那里，我们要做的是通过改变index的值，给对应的添加类名，然后让对应的显示出来而已

这里涉及到给标签添加类名 ：class=' { 类名：条件  } '    

显示与当前index值相同的数据，index是动态的，index也为1时，那么就显示索引为1的那条数据的，index是通过ref定义的响应式数据，默认值为0
④底部的小圆点也是同理，也是添加类名，小圆点都遍历出来摆在那里，通过改变index的值，让对应的小圆点添加类名，赋予css样式

遍历的是数组的长度，所以 i是从1 开始计数的，index又是从0开始累加，所以需要将 index与i-1 进行比较，给与index值对应的小圆点添加样式

⑤轮播图动态切换的实现是需要用到定时器的， 每隔一段时间让index+1,随之对应的也会被添加上fade类名，从而将显示出来。当index大于索引值的值那么就手动修改index的值为0

⑥点击左右的按钮实现的手动切换

分别给按钮添加 点击 事件，并且 传入 用于区分按钮以及事件 *** 作的 参数 ，上一页传入 -1, 下一页 1 ，点击相对应的按钮，就让index与传过来的参数的值累加，如果值大于等于数组长度，也就是大于等于数组的最大索引值，就手动给index赋值为0，如果小于0，那么就手动赋值为数组最后一条数据对应的索引值(arrlength-1)

⑦鼠标进入停止轮播，离开开始轮播

给盒子绑定鼠标进入和鼠标离开事件，鼠标进入就清除定时器

鼠标离开如果数组中有数据并且自动播放属性值为true，调用上面封装的自动轮播函数

⑧侦听器侦听props中的数据

轮播图组件在别的组件可能也会被用到，那个组件中和之前的可能调用的不是一个接口，那么也可能不是同一组数据，所以要对数据进行监听，数据发生变化就要重新调用autoPlay函数，并且立即执行

⑨组件销毁时，清理资源

当用户不再浏览轮播图时，可以对轮播图进行销毁处理，在 onUnmounted 生命周期中对定时器进行清除

一、原理
在轮播图数组dataList中，定义一个变量currentIndex = 0表示第一张，默认渲染第一张即dataList[currentIndex]，然后获取每张的下标。点击切换时把当前的下标赋值给currentIndex即可实现切换显示。

二、定义变量

三、模板渲染

四、点击小圆点切换

在li标签里执行一个点击函数，把当前下标值传进来。点击时设置currentIndex的值为当前的下标值。

五、左右按钮切换

定义两个变量作为参数prevIndex和nextIndex，利用计算属性算出当前的上一张或者下一张的下标（加1和减1 *** 作）。

六、定时器切换
定义一个定时器，每X秒执行一次nextIndex()函数即可。

鼠标经过清除定时器就不说了，使用clearInterval(thistimer)就可以了。

七、css样式

工具/材料

Sublime Text

01

首先我们需要新建一个HTML5的文档，然后在文档中导入Bootstrap的样式文件，这个文件中包含了轮播图所有的样式定义，如下图所示

02

接下来我们需要导入脚本文件，注意先导入Jquery文件，然后导入bootstrap的脚本文件，顺序一定不能颠倒，如下图所示

03

然后在body标签里定义轮播图的容器，容器的大小需要和的大小一样，否则会出现轮播图错位，效果如下图所示

04

接下来我们就正式的添加轮播图了，这里先添加三张图，如下图所示，注意让哪种轮播图显示直接调用Bootstrap的active样式即可

05

轮播添加完毕以后，就可以添加轮播图焦点了。在Bootstrap中运用li列表定义轮播图焦点，注意焦点的数量和的数量要一样，如下图所示

06

轮播图中还有一个必不可少的元素就是左右箭头，通过Bootstrap的carousel-control样式添加轮播图箭头，如下图所示

07

最后我们运行程序以后，在页面中你就可以看到如下图所示的轮播图效果了。可以看到我们上面说的轮播图焦点和左右箭头都在页面上显示出来了，如下图所示

var len = $("num > li")length;//获取长度（相当于是有多少张）
var index = 0; //序号
var adTimer; //定时器
//滚动广告
$("num li")mouseover(function() {
index = $("num li")index(this); //获取鼠标悬浮 li 的index
showImg(index); //执行滚动方法，传index进来就是当用户滑到第几张的时候就显示第几张
})eq(0)mouseover();//触发鼠标经过第一张，eq(0)指的是第一张
//滑入停止动画，滑出开始动画
$('banner_a')hover(function() {
clearInterval(adTimer); //当鼠标移动到上，关掉定时器，就是不在让滚动
}, function() {
adTimer = setInterval(function() { //离开的时候开定时器，继续滚动
showImg(index) //执行方法
index++;
if (index == len) { //最后一张之后，转到第一张
index = 0;
}
}, 1000);
})trigger("mouseleave"); //程序进来就触发鼠标离开事件，即让滚动
function showImg(index) { //滚动函数
var adHeight = $("bannerul>li:first")height();

//传index索引进来，就是当第几张鼠标经过的时候，第几张就滚动起来，比如，鼠标移动到第2张， $("bannerul")的marginLeft就往左移动-adHeight index + "px"
$("bannerul")stop(true, false)animate({
"marginLeft":-adHeight index + "px" //改变 marginTop 属性的值达到轮播的效果
});
$("num li")removeClass("on") //先把所有的li的on类名移除，再让当前的li添加on类名
eq(index)addClass("on");
}

---