JS-CSS-Methode zum Erzielen von Einblend-Fokus-Bild-Diashow-Umschalteffekten_Javascript-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt, wie der Einblend-Fokus-Bild-Diashow-Umschalteffekt mithilfe von JS CSS implementiert wird. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

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);border-radius: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;}

   

       
• 

       
• 

       
• 

       
• 

       
• 

   

   

       
• 1

       
• 2

       
• 3

                                                                                                                                                                                                   

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.