Kaedah JS CSS untuk mencapai kemahiran menukar tayangan slaid gambar fade-in effect

Contoh dalam artikel ini menerangkan cara melaksanakan kesan penukaran tayangan slaid imej fokus pudar menggunakan JS CSS. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

一款JS CSS淡入式焦点图片幻灯切换效果

body,div,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}
body{background:#000;text-align:center;font:12px/20px Arial;}
#box{position:relative;width:322px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;}
#box .list{position:relative;width:320px;height:240px;overflow:hidden;border:1px solid #ccc;}
#box .list li{position:absolute;top:0;left:0;width:320px;height:240px;opacity:0;filter:alpha(opacity=0);}
#box .list li.current{opacity:1;filter:alpha(opacity=100);}
#box .count{position:absolute;right:0;bottom:5px;}
#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha( opacity=70);jejari sempadan:20px;}
#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
#tmp{width:100px;height:100px;background:red;position:absolute;}

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini