Heim  >  Artikel  >  Web-Frontend  >  Jquery implementiert image rotation_jquery

Jquery implementiert image rotation_jquery

WBOY
WBOYOriginal
2016-05-16 16:17:391362Durchsuche

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">

    图片切换
   
   
   

   

       

           
           
           
           
           
           
           
           
       

       
       

            测试介绍文件了啊

   



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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn