Jquery implementiert image rotation_jquery

Wie kann es sein, dass die Homepage der Website keine Animation hat? Ich habe Flash As3 bereits zum Wechseln von Bildern verwendet und der Effekt ist sehr gut, aber es ist mühsam und schwierig, ihn zu ändern. Ich wollte schon immer selbst einen Bildwechseleffekt machen, aber ich dachte immer, das wäre mühsam. Ich habe es heute ausprobiert und festgestellt, dass es eigentlich relativ einfach ist. Es gibt jedoch ein kleines Problem: Im inkompatiblen Modus von IE8 schlägt das Hinzufügen eines Div-Stils mit transparentem Effekt fehl. Ich habe jedoch Google verwendet und der IE8-Kompatibilitätstest war in Ordnung.

Wie auch immer, ich habe es für mich selbst aufgezeichnet, daher werde ich nicht viel mehr sagen, und es werden keine Plug-Ins von der Seite erstellt. Einige dieser Effekte kann eine Website nicht haben, also lasst uns sie zuerst umsetzen. Der Endeffekt ist immer noch sehr beeindruckend.

Seite JS-Code

Code kopieren Der Code lautet wie folgt:

 

复制代码 代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

   
   
   
   

   

       

           
           
           
           
           
           
           
           
       

       

            8 7                     onclick=" return picChange(6)">6
                        5 4
            3                 title="2" onclick=" return picChange(2)">2                     onclick=" return picChange(1)" class="">1
       

       

            测试介绍文件了啊

   

 css的实现

复制代码 代码如下:

.picMain
{
    Rand: automatisch;
    Überlauf: versteckt;
    Breite: 1000px;
    Höhe: 400px;
    Position: relativ;
}
.picimg
{
    Breite: 10000px;
    Höhe: 400px;
    Hintergrundfarbe: #000000;
    Position: absolut;
    oben: 0px;
}
.picRemark
{
    Position: absolut;
    Breite: 500px;
    Höhe: 50px;
    unten: 0px;
    links: 0px;
    Farbe: #FFFFFF;
    Texteinzug: 2em;
}
.picRemark a
{
    Farbe: #FFFFFF;
    Textdekoration: keine;
}
.picRemark a:hover
{
    Textdekoration: unterstreichen;
}
.picaction
{
    Position: absolut;
    Breite: 1000px;
    Höhe: 50px;
    Hintergrundfarbe: #000000;
    Filter: Alpha(Deckkraft=50);
    -moz-Opazität: 0,5;
    Deckkraft: 0,5;
    Überlauf: automatisch;
    unten: 0px;
    links: 0px;
    Textausrichtung: rechts;
}
.picaction a
{
    Rand: 1 Pixel durchgehend #C0C0C0;
    Breite: 30px;
    Höhe: 30px;
    float: rechts;
    Zeilenhöhe: 30px;
    Textdekoration: keine;
    text-align: center;
    Farbe: #FFFFFF;
    Schriftstärke: fett;
    Rand oben: 10px;
    Anzeige: blockieren;
    Rand rechts: 10px;
}
.pic
{
    Breite: 1000px;
    Höhe: 400px;
    float: links;
}
.picselect
{
    Hintergrundfarbe: #919191;
}

以上就是本文的全部内容了,实现的功能很实用,希望大家能够喜欢.