Les exemples de cet article partagent la fonction de commutation à gauche et à droite JS pour votre référence. Le contenu spécifique est le suivant
Image de reproduction:
<html> <éadfr> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <itle> </ title> <link rel = "Stylesheet" href = "http://stating9.pplive.cn/pub/flagment/v_20150114110035/header.min.css" /> <! - Page Initialisation CSS et Page En-têtes communes CSS -> <style type = "Text / CSS"> @CharSet "UTF-8"; html, corps {fond de fond: # f6f5f5; } .vg-body {width: 1390px; marge: 0 auto; } / * Valeur de croissance des tâches * / .vg_title {Font-Size: 24px; hauteur de ligne: 24px; rembourrage: 20px 0; Couleur: # 464646; } .vg_task {background-Color: #fff; Position: relative; } .vg_task .arrowbtn-left, .vg_task .arrowbtn-droite {position: absolu; En haut: 70px; Largeur: 16px; hauteur: 20px; curseur: pointeur; } .vg_task .arrowbtn-left {Left: 40px; Border: 1px rouge solide; Contexte: URL (../ images / arrow-left.png) sans répétition; ; } .vg_task .arrowBtn-right {droite: 40px; Border: 1px rouge solide; Contexte: url (../ images / arrow-right.png) sans répétition; ; } .vg_taskList {width: 1200px; débordement: caché; marge: 0 auto; } .vg_tasklist ul {largeur: 999%; } .vg_tasklist li {width: 258px; hauteur: 130px; flottant: à gauche; Border: 1px solide # C8C8C8; marge: 15px 53px 15px 0; Position: relative; } .vg_tasklist li .task_hover {position: absolue; gauche: -1px; en haut: -1px; Largeur: 212px; rembourrage: 20px 25px 20px 23px; hauteur: 90px; Border-Bottom: 2px solide # E65A5A; débordement: caché; Color d'arrière-plan: # F0F0F0; Affichage: aucun; } .vg_taskList li: hover .task_hover {affiche: bloc; } .task_hover .task_desc {Font-Size: 16px; hauteur de ligne: 20px; Couleur: # 646464; } .task_hover .task_limittimes {Font-Size: 14px; Couleur: # 787878; flottant: à gauche; Tableau de rembourrage: 12px; } .vg_taskList li img {float: left; marge: 22px 8px 20px 20px; } .vg_taskList li .RightInfo {width: 136px; flottant: à gauche; Texte-aligne: Centre; } .RightInfo H3 {Font-Size: 16px; Couleur: # 646464; Tableau de rembourrage: 15px; } .RightInfo p {Font-Size: 14px; hauteur de ligne: 26px; Couleur: # 787878; } .RightInfo a, .task_hover a {display: block; Texte-aligne: Centre; Largeur: 96px; hauteur: 30px; hauteur de ligne: 30px; Border: 2px solide # e65a5a; Border-Radius: 5px; taille de police: 16px; Police-poids: 700; Couleur: # E65A5A; } .task_hover a.done, .task_hover a.done: hover {background-Color: # b4b4b4; Couleur: #FFF; Color à la frontière: # B4B4B4; curseur: par défaut; } .RightInfo a {margin: 12px auto 0; } .task_hover a {float: droit; marge: 18px; marge-droite: -4px; } .task_hover a: hover {text-Decoration: Aucun; Color en arrière-plan: # E65A5A; Couleur: #FFF; } / * grid-1230 * / .grid-1230 .vg-body {width: 1210px; } .grid-1230 .vg_tasklist {width: 1090px; } .grid-1230 .vg_taskList li {margin-droite: 16px; } .grid-1230 .vg_task .arrowBtn-left {Left: 33px; } .grid-1230 .vg_task .arrowBtn-right {droite: 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-droite: 35px; } .grid-1010 .vg_task .arrowBtn-left {Left: 30px; } .grid-1010 .vg_task .arrowBtn-droite {droit: 30px; } .grid-1010 .vg_growth_table {padding: 24px; } </ style> <! - CSS de style ajouté, le nom peut être modifié en fonction des besoins spécifiques -> <script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </cript> <cript> 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 ("ne savez pas!"); }} </ script> </ head> <body id = "body"> <script> // initialiser le jugement de style d'affichage d'état, le placer après le corps 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 ("ne savez pas!"); } </cript> <div> <! - Valeur de croissance des tâches Début -> <div> <p> Valeur de croissance de la tâche </p> </div> <div> <div> </div> <div> </div> <div> <ul id = "SwitchPic"> <li> <img src = "Images / task_year.png"> <v> <h3> Ouvrir les membres annuels </h3> Valeur <span> 200 </span> Points </p> <a href = "javascript :;"> terminé> </a> </v> <v> <p> Ouvert l'adhésion annuelle à un moment donné (12 mois et plus) </p> <p> Limite mensuelle <pan> 1 </span> fois </p> <a href = "javascript :;"> terminé </a> src = "images / task_lianxubaoyue.png"> <div> <h3> Ouvrez l'abonnement mensuel continu </h3> <p> Valeur de croissance de récompense <span> 10 </span> Points </p> <a href = "JavaScript :;"> Aller à complete> </a> </v> <v> <p> Opening Adminship annuel à un moment (12 mois et ci-dessus) <span> 1 </span> Time </p> <a href = "javascript :;"> Allez à complete> </a> </div> </li> <li> <img src = "Images / task_year.png"> <div> <h3> mise à niveau vers SVIP </h3> <p> Valeur de croissance de récompense <pan> 10 </panneuse> Point </p> <a href = "JavaScript :;"> Allez à Complete> </a> </div> <v> <p> Open Adhésion annuelle à la fois (12 mois et plus) </p> <p> Limite mensuelle <span> 1 </span> Temps </p> <a href = "Javascript :;"> Aller à la fin> </a> </v> <v> <p> Open Adming annuel à un moment ( <ple limite mensuelle <span> 1 </span> Time </p> <a href = "javascript :;"> Allez terminer> </a> </div> </li> <li> <img src = "Images / task_year.png"> <div> <h3> Suivez le compte officiel de WECHAT </h3> <p> href = "JavaScript :;"> Allez à Complete> </a> </div> <v> <p> Open Adhésion annuelle en même temps (12 mois et plus) </p> <p> Limite mensuelle <span> 1 </span> fois </p> <a href = "javascrip src = "images / task_year.png"> <div> <h3> tâche 555555555 </h3> <p> Valeur de croissance de récompense <span> 10 </span> </p> <a href = "javascript :;"> Pour terminer> </a> </v> <v> <p> Limiter les membres annuels à un moment (12 mois et ci-dessus) </ p> <p> mois <span> 1 </span> Time </p> <a href = "javascript :;"> Pour terminer> </a> </div> </li> <li> <img src = "images / task_year.png"> <div> <h3> tâche 66666666 </h3> <p> RECOMSTAGE VALUE <SPAND> 10 </ SPANS href = "javascript :;"> Pour terminer> </a> </div> <div> <p> ouvrir l'adhésion annuelle en même temps (12 mois et plus) </p> <p> Limite mensuelle <span> 1 </span> Time </p> <a href = "Javascrip src = "images / task_year.png"> <div> <h3> task7777777 </h3> <p> Valeur de croissance de récompense <span> 10 </span> </p> <a href = "javascript :;"> Pour compléter> </a> </v> <v> <p> ouvrir la limite annuelle à un moment donné (12 mois et ci-dessus) </v> <p> <p> Open Limiter annuel à un moment <span> 1 </span> Time </p> <a href = "javascript :;"> Pour terminer> </a> </v> <v> <p> ouvrir l'adhésion annuelle à la fois (12 mois et plus) </p> <p> LIMIT LOCE <Span> 1 </span> Time </p> <a href = "Javascript :;"> à compléter> </a> </div> <! - Valeur de croissance des tâches End -> </div> </ body> <script> // tâche Growth var switchpic = (function () {/ * maintenant: combien de lilinums sont actuellement: combien de lilinums sont totaux: combien de lish_li: li width marginr_li: li reight margin * / var maintenant = 1; var linum, montré, affiché, w_li, marginr_li, pré-var, montrant, affiché fonction init (o) {pre = o.prebtn; // Initialise, seulement pré.hide (); $ (# switchpic "). trouver (" li "). size (); offset = w_li + marginr_li;} else if ($ ("# body"). w_li + marginr_li;} else if ($ (# body "). + marginr_li;}} fonction bindbtn () {btnshow (); wrap.stop (true) .animate ({"margin-left": - (maintenant - 1) * offset});}); switchpic.init ({prebtn: $ (". arrowbtn-left"), nextBtn: $ (". arrowBtn-right"), wrap: $ ("# switchpic")}); </cript> </html>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.