Die Beispiele in diesem Artikel teilen die Multi-Bild-Multi-Bild-Schalt- und Rechte-Switching-Funktion für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Reproduktionsbild:
<html> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-kompatible" content = "ie = edge"> <titels> </title> <link rel = "Stylesheet" href = "http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css"/> <!-Seite Initialisierung CSS und Seite Common Header CSS-> <style type = "text/css"> @charet "utf-8"; html, Körper {Hintergrundfarbe: #f6f5f5; } .vg-body {width: 1390px; Rand: 0 Auto; } /*Task-Wachstumswert* / .vg_title {Schriftgröße: 24px; Zeilenhöhe: 24px; Polsterung: 20px 0; Farbe: #464646; } .vg_task {Hintergrundfarbe: #fff; Position: Relativ; } .vg_task .Arrowbtn-links, .vg_task .ArrowBtn-Right {Position: Absolute; Top: 70px; Breite: 16px; Höhe: 20px; Cursor: Zeiger; } .vg_task .Arrowbtn-links {links: 40px; Grenze: 1px solide Rot; Hintergrund: URL (../ Images/Arrow-left.png) No-Repeat; ; } .vg_task .Arrowbtn-right {rechts: 40px; Grenze: 1px solide Rot; Hintergrund: URL (../ Images/Arrow-right.png) No-Repeat; ; } .vg_tasklist {width: 1200px; Überlauf: versteckt; Rand: 0 Auto; } .vg_tasklist ul {width: 999%; } .vg_tasklist li {width: 258px; Höhe: 130px; float: links; Grenze: 1PX Solid #C8C8C8; Rand: 15px 53px 15px 0; Position: Relativ; } .vg_tasklist li .task_hover {Position: absolut; links: -1px; Oben: -1px; Breite: 212px; Polsterung: 20px 25px 20px 23px; Höhe: 90px; Grenzboden: 2PX Solid #e65a5a; Überlauf: versteckt; Hintergrundfarbe: #f0f0f0; Anzeige: Keine; } .vg_tasklist li: hover .task_hover {display: block; } .task_hover .task_desc {Schriftgröße: 16px; Zeilenhöhe: 20px; Farbe: #646464; } .task_hover .task_limittimes {Schriftgröße: 14px; Farbe: #787878; float: links; Padding-Top: 12px; } .vg_tasklist li img {float: links; Rand: 22px 8px 20px 20px; } .vg_tasklist li .rightinfo {width: 136px; float: links; Text-Align: Mitte; } .rightinfo H3 {Schriftgröße: 16px; Farbe: #646464; Padding-Top: 15px; } .rightinfo p {Schriftgröße: 14px; Zeilenhöhe: 26px; Farbe: #787878; } .rightinfo a, .task_hover a {display: block; Text-Align: Mitte; Breite: 96px; Höhe: 30px; Zeilenhöhe: 30px; Grenze: 2PX Solid #e65a5a; Border-Radius: 5px; Schriftgröße: 16px; Schriftgewicht: 700; Farbe: #e65a5a; } .task_hover a.done, .task_hover a.done: hover {Hintergrundfarbe: #b4b4b4; Farbe: #fff; Grenzfarbe: #B4B4B4; Cursor: Standard; } .rightinfo a {margin: 12px auto 0; } .task_hover a {float: rechts; Rand: 18px; Rand -Rechts: -4px; } .task_hover a: hover {textdekoration: keine; Hintergrundfarbe: #e65a5a; Farbe: #fff; } /*grid-1230* / .grid-1230 .vg-body {width: 1210px; } .grid-1230 .vg_tasklist {width: 1090px; } .Grid-1230 .vg_tasklist li {margin-right: 16px; } .Grid-1230 .vg_task .Arrowbtn-left {links: 33px; } .Grid-1230 .vg_task .Arrowbtn-right {rechts: 33px; } .grid-1230 .vg_growth_table {padding: 24px 30px; } .grid-1010 .vg-body {width: 990px; } .grid-1010 .vg_tasklist {width: 850px; } .grid-1010 .vg_tasklist li {margin-right: 35px; } .Grid-1010 .vg_task .Arrowbtn-left {links: 30px; } .Grid-1010 .vg_task .Arrowbtn-right {rechts: 30px; } .grid-1010 .vg_growth_table {padding: 24px; } </style> <!--Added style css, the name can be modified according to specific needs--> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> window.onresize = function() { var winWidth = document.body.clientWidth; if (Winwidth <= 1230) {body.className = "grid-1010"; } else if (Winwidth <= 1410) {body.className = "grid-1230"; } else if (Winwidth> 1410) {body.className = "grid-1410"; } else {alert ("Nicht wissen!"); }} </script> </head> <body id = "body"> <script> // Initialisieren Sie das Beurteilung des Statusanzeigestils, platzieren Sie es nach der Body var winwidth = document.body.clientwidth; if (Winwidth <= 1230) {body.className = "grid-1010"; } else if (Winwidth <= 1410) {body.className = "grid-1230"; } else if (Winwidth> 1410) {body.className = "grid-1410"; } else {alert ("Nicht wissen!"); } </script> <div> <!-Task-Wachstumswert begin-> <p> Task-Wachstumswert </p> </div> <div> <div> </div> <div> </div> <div> <ul id = "Switchpic"> <li> <img Src = "Images/Task_year.png"> <div> <H3> <H3> <H3> <H3> </h3> </h3> <pnng. Punkte </p> <a href = "JavaScript:;"> Fertig> </a> </div> <div> <p> Die jährliche Mitgliedschaft zu einer Zeit (12 Monate und oben) </p> <p> Monatslimit <spenclear> 1 </span> mal </p> <a href = "javascript:;" src = "bilder/task_lianxubaoyue.png"> <div> <h3> Öffnen Sie kontinuierliche monatliche Abonnements </H3> <p> Belohnungswachstumswert <span> 10 </span> </p> <a href = "JavaScript :;"> GO, um zu vervollständigen> </a> </div> <p> monathyly, monatlich zu beschreiten. <span> 1 </span> Zeit </p> <a href = "javaScript:;"> Gehen Sie zu Fertig> </a> </div> </li> <li> <img src = "bilder/task_year href = "JavaScript:;"> Gehen Sie zu Fertig> </a> </div> <div> <p> Jährliche Mitgliedschaft zu einer Zeit (12 Monate und oben) </p> <p> monatliche Limit <spannes> 1 </span> Zeit </p> <a href = "javaScript :; <p> monatliches Limit <Pan> 1 </span> Zeit </p> <a href = "javaScript:;"> Gehen Sie zu Fertig> </a> </div> </li> <li> <img Src = "Bilder/Task_year href = "JavaScript:;"> Gehen Sie zu Fertig> </a> </div> <div> <p> Einmalige jährliche Mitgliedschaft (12 Monate und oben) </p> <p> monatliches Limit <spannes> 1 </span> Zeiten </p> <a href = "javaScript:; src = "bilder/task_year <span> 1 </span> Zeit </p> <a href = "javaScript:;"> Um zu vervollständigen> </a> </div> </li> <li> <img src = "bilder/task_year href="javascript:;">to complete></a> </div> <div> <p>Open annual membership at one time (12 months and above)</p> <p>Monthly limit <span>1</span>time</p> <a href="javascript:;">to complete></a> </div> </li> <li> <img src = "bilder/task_year <span> 1 </span> Zeit </p> <a href = "javaScript:;"> Um zu vervollständigen> </a> </div> <div> <p> Die jährliche Mitgliedschaft zu einer Zeit (12 Monate und oben) </p> <p> Mondlimit <Pan> 1 </span> Zeit </p> <a> </li> <ulf = " </div> <!-Task-Wachstumswert End-> </div> </body> <script> // Aufgabenwachstum Var Switchpic = (function () {/*jetzt: Wie viele Lilinums sind derzeit: Wie viele Lilinum sind insgesamt: Wie viele lish_li: li breit marginr_li: li rechts init (o) {Pre = O.PreBtn; // Initialisieren Sie als nächstes vor. $ ("#switchpic") = w_li + marginr_li; + marginr_li; marginr_li; Wrap.Stop (true) .Animate ({"Margin -links": -(jetzt -1) * Offset}); switchpic.init ({preBtn: $ (". Arrowbtn-links"), NextBtn: $ (". Arrowbtn-Right"), Wrap: $ ("#switchpic")}); </script> </html>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.