Los ejemplos en este artículo comparten la función de conmutación de izquierda y derecha de múltiples imágenes JS para su referencia. El contenido específico es el siguiente
Imagen de reproducción:
<html> <head> <meta charset = "utf-8"> <meta http-oquiv = "x-ua-compatible" content = "ie = edge"> <title> </title> <link rel = "Stylesheet" href = "http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css"/> <!-Page Inicialización CSS y Página CSS CSS-> <style Type = "Text/CSS"> @Charset "UTF-8"; html, cuerpo {Color de fondo: #F6F5F5; } .vg-Body {ancho: 1390px; margen: 0 auto; } /*Valor de crecimiento de la tarea* / .vg_title {font-size: 24px; Línea-aguja: 24px; relleno: 20px 0; Color: #464646; } .vg_task {en segundo plano: #fff; Posición: relativo; } .vg_task .arwbtn-left, .vg_task .arrowbtn-right {posición: absoluto; Arriba: 70px; Ancho: 16px; Altura: 20px; cursor: puntero; } .vg_task .arrowbtn-left {izquierda: 40px; borde: 1px rojo sólido; Antecedentes: URL (../ Images/Arrow-left.png) No-Repeat; ; } .vg_task .arrowbtn-right {Right: 40px; borde: 1px rojo sólido; fondo: url (../ imágenes/flecha-right.png) No-repeat; ; } .vg_tasklist {ancho: 1200px; desbordamiento: oculto; margen: 0 auto; } .vg_tasklist ul {ancho: 999%; } .vg_tasklist li {ancho: 258px; Altura: 130px; flotante: izquierda; borde: 1px sólido #C8C8C8; margen: 15px 53px 15px 0; Posición: relativo; } .vg_tasklist li .Task_Hover {posición: absoluto; Izquierda: -1px; arriba: -1px; Ancho: 212px; relleno: 20px 25px 20px 23px; Altura: 90px; Border-Bottom: 2px Solid #E65A5A; desbordamiento: oculto; Color de fondo: #F0F0F0; Pantalla: ninguno; } .vg_tasklist li: hover .Task_Hover {display: block; } .Task_Hover .Task_Desc {font-size: 16px; Línea de altura: 20px; Color: #646464; } .Task_Hover .Task_limitTimes {font-size: 14px; Color: #787878; flotante: izquierda; Top-top: 12px; } .vg_tasklist li img {float: izquierda; margen: 22px 8px 20px 20px; } .vg_tasklist li .rightinfo {width: 136px; flotante: izquierda; Text-Align: Center; } .RightInfo H3 {Font-size: 16px; Color: #646464; Top-top: 15px; } .RightInfo P {Font-size: 14px; Línea de altura: 26px; Color: #787878; } .RightInfo a, .Task_Hover a {Display: Block; Text-Align: Center; Ancho: 96px; Altura: 30px; Línea de altura: 30px; Border: 2px Solid #E65A5A; Border-Radius: 5px; tamaño de fuente: 16px; Font-peso: 700; Color: #E65A5A; } .Task_Hover a.done, .Task_Hover a.done: hover {background-color: #b4b4b4; Color: #fff; color de borde: #b4b4b4; cursor: predeterminado; } .RightInfo a {margen: 12px Auto 0; } .Task_Hover a {float: right; margen-top: 18px; margen -derecha: -4px; } .Task_Hover A: Hover {Text-Decoration: None; Color de fondo: #E65A5A; Color: #fff; } /*Grid-1230* / .Grid-1230 .vg-Body {ancho: 1210px; } .grid-1230 .vg_tasklist {ancho: 1090px; } .grid-1230 .vg_tasklist li {margin-right: 16px; } .grid-1230 .vg_task .arwbtn-left {izquierda: 33px; } .Grid-1230 .vg_task .arrowbtn-right {right: 33px; } .grid-1230 .vg_growth_table {relleno: 24px 30px; } .grid-1010 .vg-Body {ancho: 990px; } .grid-1010 .vg_tasklist {width: 850px; } .grid-1010 .vg_tasklist li {margin-right: 35px; } .grid-1010 .vg_task .arwbtn-left {izquierda: 30px; } .grid-1010 .vg_task .arrowbtn-right {right: 30px; } .grid-1010 .vg_growth_table {relleno: 24px; } </style> <!-CSS de estilo agregado, el nombre se puede modificar de acuerdo con las necesidades específicas-> <script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script> window.onresize = function () {var winwidth = document.bodywidth; if (winwidth <= 1230) {body.classname = "grid-1010"; } else if (winwidth <= 1410) {body.classname = "grid-1230"; } else if (winwidth> 1410) {body.classname = "grid-1410"; } else {alerta ("¡No lo sepas!"); }} </script> </head> <cuerpo id = "cuerpo"> <script> // Inicializar el juicio de estilo de pantalla de estado, colóquelo después del cuerpo 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 {alerta ("¡No lo sepas!"); } </script> <div> <!-Valor de crecimiento de la tarea Bien-> <div> <p> Valor de crecimiento de la tarea </p> </div> <div> <div> <div> </div> <div> </div> <div> <ul id = "switchpic"> <li> <img src = "imágenes/tarea_year.png"> <div> <h3> Membresía anual abierta </h3> <h3> <mg src = "Images/tarea_year.png"> <div> <h3> Puntos </p> <a href = "javascript :;"> completado> </a> </div> <div> <p> Abrir membresía anual a la vez (12 meses y más) </p> <p> Límite mensual <span> 1 </span> Times </p> <a href = "javaScript:;"> completado </a> </li> <li> <i -iMg src = "imágenes/task_lianxubaoyue.png"> <div> <h3> Abra la suscripción mensual continua </h3> <p> Valor de crecimiento de recompensa <Span> 10 </span> Puntos </p> <a href = "javascript:;"> vaya a completo> </a> </div> <div> <p> abierta anual <span> 1 </span> tiempo </p> <a href = "javascript :;"> vaya a completar> </a> </div> </li> <li> <img src = "imágenes/tarea_year.png"> <div> <h3> Actualización a svip </h3> <p> recompensa el valor de crecimiento <pan> 10 </span> punto </p> <a a a a un href = "javascript :;"> vaya a completar> </a> </div> <div> <p> Abrir membresía anual en un momento (12 meses y más arriba) </p> <p> Límite mensual <span> 1 </span> tiempo </p> <a href = "JavaScript :;"> Vaya a completar> </a> </iv> <iv> <p> ABRIR ANTIVO AL TIEMPO (12 MESES Y ABSOMENTES) </PROBLE <p> límite mensual <span> 1 </span> tiempo </p> <a href = "javascript :;"> vaya a completar> </a> </div> </li> <li> <iMg src = "Images/tarea_year.png"> <hiv> <h3> Siga la cuenta oficial de Wechat </h3> href = "javascript :;"> vaya a completar> </a> </div> <div> <p> Abra la membresía anual en un momento (12 meses y más) </p> <p> Límite mensual <Span> 1 </span> Times </p> <a href = "javascript :;"> vaya a completar> </a> </div> </li> <li> <omgg: src = "imágenes/tarea_year.png"> <div> <h3> tarea 5555555555 </h3> <p> Valor de crecimiento de recompensa <Span> 10 </span> Point </p> <a href = "javaScript:;"> para completar> </a> </div> <div> <p> abre la membresía anual en un momento (12 meses y arriba) <span> 1 </span> tiempo </p> <a href = "javascript :;"> para completar> </a> </div> </li> <li> <img src = "images/task_year.png"> <div> <h3> tarea 666666666 </h3> <p> Valor de crecimiento de recompensa <pan> href = "javascript :;"> para completar> </a> </div> <div> <p> Abra la membresía anual en un momento (12 meses y más) </p> <p> Límite mensual <Span> 1 </span> Time </p> <a href = "JavaScript :;"> para completar> </a> </div> </li> <li> <iMgg: src = "imágenes/tareas_year.png"> <div> <h3> tarea7777777 </h3> <p> Valor de crecimiento de recompensa <Span> 10 </span> Point </p> <a href = "javascript:;"> para completar> </a> </div> <div> <p> Open anual membresía en un momento (12 meses y arriba) </p> <p> <span>1</span>time</p> <a href="javascript:;">to complete></a> </div> <div> <p>Open annual membership at one time (12 months and above)</p> <p>Moon limit <span>1</span>time</p> <a href="javascript:;">to complete></a> </div> </li> </ul> </div> </div> <!--Task growth value end--> </div> </body> <script> //task growth var switchPic = (function() { /*now:How many lilinums are currently: How many lilinums are total: How many lish_li:li width marginR_li:li right margin*/ var now = 1; var linum, shownum, offset, w_li, marginR_li, pre, next, Wrap Function Init (O) {Pre = O.PreBTN; 1) {// Inicializar, SIGUIENTE PRE.) $ ("#switchPic"). Find ("Li"). Size (); parseint (wrap.find ("li"). css ("marginright"); parseint (wrap.find ("li"). css ("marginright"); parseint (wrap.find ("li"). CSS ("Marginright")); }); });} return {init: init}}) (); switchPic.init ({preBTN: $ (". </script> </html>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.