深入浅出Flask(29): H-ui前端框架的带缩略图幻灯片

Posted caimouse

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入浅出Flask(29): H-ui前端框架的带缩略图幻灯片相关的知识,希望对你有一定的参考价值。

前面学习了一个幻灯片的功能,如果幻灯片还多几张,又想让客户看到每一张的缩略图的话,就需要采用另外一种方式,比如本例实现的效果图如下:

可以看到下面有几个缩略图,在我的例子里由于没有美工做缩略图,所以采用几个别人的图片,这四张缩略图就可以简单地表示每一个图片的基本内容,只要用户点击它,就可以切换到那个图片的大图显示。如果不点击,也可以轮换的方法来显示。

实现的过程先写样式:

<style type="text/css">

以上是关于深入浅出Flask(29): H-ui前端框架的带缩略图幻灯片的主要内容,如果未能解决你的问题,请参考以下文章

深入浅出Flask(35): H-ui前端框架的面板滚动

深入浅出Flask(26): H-ui前端框架的顶部导航

深入浅出Flask(12): H-ui前端框架的响应式隐藏显示

深入浅出Flask(14): H-ui前端框架的表格

深入浅出Flask(22): H-ui前端框架的字体图标

深入浅出Flask(20): H-ui前端框架的表单验证