Rumah >hujung hadapan web >tutorial js >Kaedah JS CSS untuk mencapai kemahiran menukar tayangan slaid gambar fade-in effect_javascript

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

WBOYasal: 2016-05-16 16:12:581035semak imbas

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