Banner图的播放

ゝ一纸荒年。 2021-09-27 08:32 342阅读 0赞

个人资源与分享网站：[http://xiaocaoshare.com/][http_xiaocaoshare.com]

1.效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW8yOTczMjg_size_16_color_FFFFFF_t_70][]

2.页面代码

<div class="carousel-inner" role="listbox">  
        <div class="item active" th:each="hot,hotStat : $\{bList\}"  th:if="$\{hotStat.index\} == 0">  
         <a  th:href="$\{hot.url\}">  
            <img th:src="'/upload/viewImg2/'+$\{hot.picture\}+'@1145x324'">   
           </a>   
        </div>  
        <div  class="item" th:each="hot,hotStat : $\{bList\}"  th:if="$\{hotStat.index\} != 0">  
         <a  th:href="$\{hot.url\}">   
            <img th:src="'/upload/viewImg2/'+$\{hot.picture\}+'@1145x324'">   
         </a>   
        </div>  
          
      </div>  
          
      <a class="left carousel-control" href="\#carousel-example-generic" role="button" data-slide="prev">  
        <i class="fa fa-angle-left" aria-hidden="true"></i>  
        <span class="sr-only">Previous</span>  
      </a>  
      <a class="right carousel-control" href="\#carousel-example-generic" role="button" data-slide="next">  
        <i class="fa fa-angle-right" aria-hidden="true"></i>  
        <span class="sr-only">Next</span>  
      </a>  
    </div>

[http_xiaocaoshare.com]: http://xiaocaoshare.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW8yOTczMjg_size_16_color_FFFFFF_t_70]: /images/20210923/538826bf51d140cea25f4148068451ab.png