Jquery中文網 www.2030036.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 CSS實現輪播圖廣告效果

CSS實現輪播圖廣告效果

發布時間:2020-05-07   編輯:www.2030036.live
jquery中文網為您提供CSS實現輪播圖廣告效果等資源,歡迎您收藏本站,我們將為您提供最新的CSS實現輪播圖廣告效果資源
輪播圖就是圖片自由切換了在這里我們來看一篇CSS實現輪播圖廣告效果吧,希望這個例子能夠為各位同學帶來幫助哦。


對于用 css 實現一個輪播圖的緣由,是那時候剛開始接觸前端,完全還不懂 js。但是有一個項目(就是一個用來應付面試的作品)需要做一個輪播的效果,當時第一反應就是用 css3 自定義動畫 -webkit-animation。做出來的效果自己覺得還可以,唯一的不足就是鼠標點擊切換 banner 圖和指定到某個圖。如果項目中不需要切換變換圖片的需求,用 css3 做,何嘗不是一種辦法。不多說,先上代碼:

 

html 代碼如下:

<div class="test">
    <a href="#" ><img class="img1" src="1.jpg" ></a>
    <a href="#" ><img class='img2' src="2.jpg" ></a>
    <a href="#" ><img class='img3' src="3.jpg" ></a>
    <a href="#" ><img class='img4' src="4.jpg" ></a>
</div>
 

接著 css 代碼:


@-webkit-keyframes t1{
    0%{ left: 0; }
    20%{ left: 0; }
    25%{ left: -960px; }
    45%{ left: -960px; }
    50%{ left: -1920px; }
    70%{ left: -1920px; }
    75%{ left: -2880px; }
    95%{ left: -2880px; }
    100%{ left: 0; }
}
@-webkit-keyframes t2{
    0%{ left: 960px; }
    20%{ left: 960px; }
    25%{ left: 0; }
    45%{ left: 0; }
    50%{ left: -960px; }
    70%{ left: -960px; }
    75%{ left: -1920px; }
    95%{ left: -1920px; }
    100%{ left: 960px; }
}
@-webkit-keyframes t3{
    0%{ left: 1920px; }
    20%{ left: 1920px; }
    25%{ left: 960px; }
    45%{ left: 960px; }
    50%{ left: 0; }
    70%{ left: 0; }
    75%{ left: -960px; }
    95%{ left: -960px; }
    100%{ left: 1920px; }
}
@-webkit-keyframes t4{
    0%{ left: 2880px; }
    20%{ left: 2880px; }
    25%{ left: 1920px; }
    45%{ left: 1920px; }
    50%{ left: 960px; }
    70%{ left: 960px; }
    75%{ left: 0; }
    95%{ left: 0; }
    100%{ left: 2880px; }
}

這里定義了 t1、t2、t3、t4 四個動畫名稱,主要是動畫里的幀數的設置技巧,因為只有4張圖,所以就取每次幀數增加 25% 的時候才讓 left 值減去圖片寬度,而在改變 left 值之前的 5%(這個值根據情況調整)處 left 值保持不變,而這個 5% 表示的就是輪播圖中圖片移動的時間,另外 20% 表示的就是圖片禁止的狀態。然后把這4個自定義動畫一一放到每一個 img 里,例如:


.test .img1{
    left: 0;
    -webkit-animation: t1 linear 12s infinite;
       -moz-animation: t1 linear 12s infinite;
        -ms-animation: t1 linear 12s infinite;
         -o-animation: t1 linear 12s infinite;
            animation: t1 linear 12s infinite;
}
.test .img2{
    left: 960px;
    -webkit-animation: t2 linear 12s infinite;
       -moz-animation: t2 linear 12s infinite;
        -ms-animation: t2 linear 12s infinite;
         -o-animation: t2 linear 12s infinite;
            animation: t2 linear 12s infinite;
}
.test .img3{
    left: 1920px;
    -webkit-animation: t3 linear 12s infinite;
       -moz-animation: t3 linear 12s infinite;
        -ms-animation: t3 linear 12s infinite;
         -o-animation: t3 linear 12s infinite;
            animation: t3 linear 12s infinite;
}
.test .img4{
    left: 2880px;
    -webkit-animation: t4 linear 12s infinite;
       -moz-animation: t4 linear 12s infinite;
        -ms-animation: t4 linear 12s infinite;
         -o-animation: t4 linear 12s infinite;
            animation: t4 linear 12s infinite;
}
.test:hover img{
    -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
        -ms-animation-play-state: paused;
         -o-animation-play-state: paused;
            animation-play-state: paused;
}

代碼最后給了一個鼠標移上去,動畫停止的效果,整個輪播的時間自行設置,‘infinite’ 表示一直持續輪播。

您可能感興趣的文章:
基于jquery實現圖片廣告輪換效果代碼
基于jQuery的仿flash的廣告輪播
基于jQuery的仿flash的廣告輪播代碼
12款經典的白富美型—jquery圖片輪播插件—前端開發必備
圖片輪播插件 Image rotator
jQuery圖片輪播的具體實現
jquery實現鼠標拖動圖片效果示例代碼
JQuery 圖片滾動輪播示例代碼
用jquery等比例控制圖片寬高的具體實現
jQuery 幻燈片插件(帶縮略圖功能)

[關閉]
888棋牌金花app 吉林快3在线购买 浙江11选5带坐标走势图 东方6 1中三十一多少钱 股票指数怎么买卖有什么门槛 极速快3怎么看大小比较准 贵州快3开奖结果查 甘肃十一选五走势图推荐 内蒙古十一选五开奖 中原风采22最新开奖号 内蒙快3走势图今天