Rumah >hujung hadapan web >tutorial js >Kaedah JS CSS untuk menukar arah penukaran tayangan slaid gambar secara automatik menukar kemahiran effect_javascript

Kaedah JS CSS untuk menukar arah penukaran tayangan slaid gambar secara automatik menukar kemahiran effect_javascript

WBOYasal: 2016-05-16 16:11:331258semak imbas

Contoh dalam artikel ini menerangkan kaedah JS CSS untuk menukar arah penukaran secara automatik bagi kesan penukaran tayangan slaid gambar. 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;}