圖片輪播小工具

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

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

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


點按下面的 Code 複製 XML碼： 最多可輪播 5張圖片。

<b:widget 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'>
       <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>

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

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

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

 

編輯連結清單

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

收工 ....