圖片輪播小工具

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

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

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

點按下面的 Code 複製 XML碼：( 右邊滑入)

<b:widget id='LinkList717' locked='false' title='圖片輪播4' 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張 圖片，你也可以輸入更多，以後用來替換輪流使用。

Demo 範例 ~ ⭐ emporio 主題舘

收工 ....

點按下面的 Code 複製 XML碼：( 淡入淡出 )， 最多可輪播 5張圖片。

<b:widget id='LinkList717' locked='false' title='圖片輪播5' 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'>
       <b:loop values='data:links take 5' var='link'>
       <div><img expr:src='data:link.target'/>
 <span class='text'> <data:link.name/> </span>
   </div>
     </b:loop>
</div>
</b:includable>
                      <b:includable id='style'>
<style type='text/css'>
    #s-content {
  position: relative;
    display: block;
    height: 56.2vw;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
    margin-bottom:1.5em;
}

#s-content div {
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
<b:if cond='data:links.size &gt; 1'>
  opacity: 0;
    filter: alpha(opacity=0);
</b:if>  
    <b:switch var='data:links.size'>
<b:case value='2'/>
    animation: 10s round infinite;   
<b:case value='3'/>
    animation: 16s round infinite;
<b:case value='4'/>
    animation: 20s round infinite;  
<b:case value='5'/>
    animation: 25s round infinite;     
</b:switch>
}
#s-content img{width:100%; height:100%; }
 #s-content span{
  color: #fff;
  font-size: 26px;
  padding: 8px 12px;
  position: absolute;
  left:0;
  bottom: 2em;
  width: 100%;
  text-align: center;
  text-shadow:1px 2px 5px rgba(30,30,30,0.8);
}

@keyframes round {
     <b:switch var='data:links.size'>
<b:case value='2'/>
    10% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    50% {
        opacity: 1;
        filter: alpha(opacity=100);
     }
    60% {
        opacity: 0;
        filter: alpha(opacity=0);
     }

<b:case value='3'/>
   6.25% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    37.5% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    43.75% {
        opacity: 0;
        filter: alpha(opacity=0);
    }

<b:case value='4'/>
    5% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    25% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
    }

<b:case value='5'/>
    4% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    20% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    24% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
</b:switch> }

#s-content div:nth-child(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
            z-index:15;
}

#s-content div:nth-child(2) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
            z-index:14;
}

#s-content div:nth-child(3) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;
            z-index:13;
}

#s-content div:nth-child(4) {
    -webkit-animation-delay: 15s;
        animation-delay: 15s;
            z-index:12;
}

#s-content div:nth-child(5) {
    -webkit-animation-delay: 20s;
         animation-delay: 20s;
            z-index:11;
}
 </style>
</b:includable>
     </b:widget>