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

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2016-05-16 16:12:58

asal

1112 orang telah melayarinya

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;}

Artikel terbaru oleh pengarang