圖片輪播小工具

 包裝在連結清單內 ~ 純 CSS 製作 

Blogger 專用圖片輪播小工具，使用簡單、只要填上圖片說明文字和圖片網址就可以。

圖片:建議使用5比3，或 1600 x 900

點按下面的 Code 複製 XML碼：(滑進滑出)

<b:widget cond='data:view.isHomepage' id='LinkList717' locked='false' title='圖片輪播' type='LinkList' version='2' visible='true'>
            <b:includable id='main'>
   <b:include name='content'/>
  <b:include name='style'/>
</b:includable>
                      <b:includable id='content'>
<div id='s-content'>
   <div id='wid-slider'>
      <b:loop values='data:links take 4' var='link'>
       <div><img expr:src='data:link.target'/>
 <span class='text'> <data:link.name/> </span>
   </div>
     </b:loop>
<div><img expr:src='data:links[0].target'/>
 <span class='text'> <b:eval expr='data:links[0].name'/> </span>
   </div>
 
 </div></div>
</b:includable>
                      <b:includable id='style'>
<style type='text/css'>
@keyframes slid2 {
0% { left: 0%; }
40% { left: 0%; }
50% { left: -100%; }
90% { left: -100%; }
100% { left: -200%; }
}
@keyframes slid3 {
0% { left: 0%; }
26.3% { left: 0%; }
33% { left: -100%; }
59.3% { left: -100%; }
66% { left: -200%; }
92.3% { left: -200%; }
100% { left: -300%; }
}
@keyframes slid4 {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

#s-content{overflow: hidden; position: relative; margin-bottom:1.5em}
#wid-slider &gt; div { width: 20%; float: left; position: relative;}
#wid-slider img { width: 100%; max-height:90vh; height:60vw}
#wid-slider .text {
  color: #fff;
  font-size: 26px;
  padding: 8px 12px;
  position: absolute;
  left:0;
  bottom: 2em;
  width: 100%;
  text-align: center;
}

#wid-slider {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
<b:switch var='data:links.size'>
<b:case value='2'/>
    animation: 10s slid2 infinite;   
<b:case value='3'/>
    animation: 15s slid3 infinite;
<b:case value='4'/>
    animation: 20s slid4 infinite;   
</b:switch>
}

 </style>
</b:includable>
                    </b:widget>

若要讓滑鼠移過去會暫停，在 CSS style 裡加入這行 ▶ #wid-slider:hover {animation-play-state: paused;}

 接下來，>> 點選編輯HTML >> 進入 XML編輯器 

找到你想放置的地方、( 插入 ) 貼上複製的 XML 碼 。 

 

編輯連結清單

轉到 [版面配置]窗格 ~ 打開連結清單小工具，在設置中填寫圖片說明文字和圖片網址。
最多只能輪播 4張 圖片，你也可以輸入更多，以後用來替換輪流使用。

收工 ....