Os exemplos deste artigo compartilham a função de comutação esquerda e direita JS Multi-Picture para sua referência. O conteúdo específico é o seguinte
Imagem de reprodução:
<html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatível com" content = "ie = Edge"> <Title> </title> <link rel = "Stylesheet" href = "http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css"/> <!-Página inicialização CSS e cabeçalhos comuns CSS-> <style type = "textos/css"> @Charset "utf-8"; html, corpo {cor de fundo: #f6f5f5; } .vg-corpo {largura: 1390px; margem: 0 automático; } /*Valor de crescimento da tarefa* / .vg_title {font-size: 24px; altura da linha: 24px; preenchimento: 20px 0; Cor: #464646; } .vg_task {background-color: #fff; Posição: relativa; } .vg_task .arrowbtn-left, .vg_task .arrowbtn-right {posição: absoluto; TOP: 70px; Largura: 16px; Altura: 20px; Cursor: Ponteiro; } .vg_task .arrowbtn-left {esquerda: 40px; borda: 1px vermelho sólido; Antecedentes: URL (../ Images/Arrow-Left.png) No-REPEAT; ; } .vg_task .arrowbtn-right {direita: 40px; borda: 1px vermelho sólido; Antecedentes: URL (../ Images/Arrow-Right.png) No-Right; ; } .vg_tasklist {width: 1200px; estouro: oculto; margem: 0 automático; } .vg_tasklist ul {width: 999%; } .vg_tasklist li {width: 258px; Altura: 130px; flutuar: esquerda; borda: 1px Solid #C8C8C8; margem: 15px 53px 15px 0; Posição: relativa; } .vg_tasklist li .Task_hover {Position: Absolute; Esquerda: -1px; topo: -1px; Largura: 212px; preenchimento: 20px 25px 20px 23px; Altura: 90px; fundo de borda: 2px Solid #E65A5A; estouro: oculto; Background-Color: #f0f0f0; Exibir: Nenhum; } .vg_tasklist li: hover .task_hover {display: block; } .task_hover .task_desc {font-size: 16px; altura de linha: 20px; Cor: #646464; } .task_hover .task_limittimes {font-size: 14px; Cor: #787878; flutuar: esquerda; Top-top: 12px; } .vg_tasklist li img {float: esquerda; margem: 22px 8px 20px 20px; } .vg_tasklist li .rightInfo {width: 136px; flutuar: esquerda; Alinhamento de texto: centro; } .rightInfo H3 {font-size: 16px; Cor: #646464; Top-top: 15px; } .rightInfo p {font-size: 14px; altura da linha: 26px; Cor: #787878; } .rightInfo A, .Task_Hover A {Display: Block; Alinhamento de texto: centro; Largura: 96px; Altura: 30px; altura de linha: 30px; Border: 2px Solid #E65A5A; Radio de fronteira: 5px; Size da fonte: 16px; peso-fonte: 700; Cor: #e65a5a; } .Task_Hover A.Done, .Task_Hover A.Done: Hover {Background-Color: #B4B4B4; Cor: #FFF; Border-Color: #B4B4B4; Cursor: padrão; } .rightInfo a {margem: 12px Auto 0; } .Task_Hover A {float: Right; Margin-top: 18px; Margem -direita: -4px; } .Task_Hover A: Hover {Text-Decoration: Nenhum; Background-Color: #E65A5A; Cor: #FFF; } /*grid-1230* / .Grid-1230 .vg-corpo {width: 1210px; } .grid-1230 .vg_tasklist {width: 1090px; } .grid-1230 .vg_tasklist li {margem-direita: 16px; } .grid-1230 .vg_task .arrowbtn-left {esquerda: 33px; } .grid-1230 .vg_task .arrowbtn-right {direita: 33px; } .grid-1230 .vg_growth_table {preenchimento: 24px 30px; } .Grid-1010 .vg-Body {Width: 990px; } .grid-1010 .vg_tasklist {width: 850px; } .grid-1010 .vg_tasklist li {margem-direita: 35px; } .grid-1010 .vg_task .arrowbtn-left {esquerda: 30px; } .grid-1010 .vg_task .arrowbtn-right {direita: 30px; } .grid-1010 .vg_growth_table {preenchimento: 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 ("Não sei!"); }} </script> </ad Head> <Body id = "Body"> <Script> // Inicialize o julgamento do estilo de exibição de status, coloque -o depois do corpo 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 ("Não sei!"); } </script> <div> <!-O valor do crescimento da tarefa começa-> <div> <p> Valor de crescimento da tarefa </p> </div> <div> <div> </div> <div> </div> <div> <ul id = switchpic "> <li> <mg src =" imagens/task_year.png "> <h3> <h3> <mg src =" imagens/task_year.png "> <h3> <h3> PONTOS </p> <a href = "javascript :;"> concluído> </a> </div> <div> <p> Abra a associação anual de uma só vez (12 meses e acima) </p> <p> Limite mensal </span> 1 vezes </p </href = "javascript:;"> </a-aa> </ src = "Images/task_lianxubaoyue.png"> <div> <h3> Abra a assinatura mensal contínua </h3> <p> Valor de crescimento da recompensa <pan> 10 </span> pontos </p> <a href = "javascript:"> ir para completar> </a> </div> <d> me meses aberto na hora de aberto (/c) <) <) <) <) <) <) <) <) <) <) <) (href = "Javascript:; </span> 1 </span> time </p> <a href = "javascript :;"> vá para completar> </a> </div> </li> <li> <img src = "imagens/task_year.png"> <div> <h3> upgrade para svip </h3> <p> <p> span <spanlegy <rpan> <dr> <d3> upgrade para svip </h3> <p> span <panwergy <purn <spano <rpan> <div> <h3> upgrade para svip </h3> <p> span <panght walwer <panwer 10 <h3> <h3> spun </h3> <p> span <panght <span> <d3> <h3> upgrade para svip </h3> <p> href = "javascript :;"> vá para completar> </a> </div> <div> <p> Abra a associação anual ao mesmo tempo (12 meses e acima) </p> <p> Limite mensal <pan span> 1 </span> tempo </p> <a href = "javascript:; <p> Limite mensal <pan> 1 </span> Tempo </p> <a href = "javascript :;"> vá para completar> </a> </div> </li> <li> <img src = "imagens/task_year.png"> <d> <h3> siga o wechat Official </H3> href = "JavaScript :;"> vá para completar> </a> </div> <div> <p> Abra a associação anual ao mesmo tempo (12 meses e acima) </p> <p> Limite mensal <pan> 1 </span> Times </p> <a href = "javascript:; src = "imagens/task_year.png"> <div> <h3> Tarefa 555555555 </h3> <p> Valor de crescimento da recompensa </span> 10 </span> ponto </p> <a href = "javascript:"> para completar> </a> </div) </span> 1 </span> Tempo </p> <a href = "javascript :;"> complete> </a> </div> </li> <li> <img src = "imagens/task_year.png"> <div> <h3> tarefa 666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666érnos <H3emwsemem <H3> href = "JavaScript :;"> para completar> </a> </div> <div> <p> Abrir a associação anual ao mesmo tempo (12 meses e acima) </p> <p> limite mensal <span> 1 </span> tempo </p> <a href = "javascript:; src = "imagens/task_year.png"> <div> <h3> task77777777 </h3> <p> Valor de crescimento da recompensa <pan> 10 </span> ponto </p> <a href = "javascript:; <pan> 1 </span> Tempo </p> <a href = "javascript :;"> para completar> </a> </div> <div> <p> abrir a associação anual ao mesmo tempo (12 meses e acima) </p> <p> Limite da lua <p) 1 </span> </p </href = "javasscript:"> 1 </span> </p <a> <//"javascript:"> para </span> </<////"<p> <p>"> 1 </span> </p. </div> <!-Tarefas de crescimento de crescimento final-> </div> </body> <cript> // crescimento da tarefa var switchpic = (function () {/*agora: quantos lilinums são atualmente: quantos lilinums são totais: quantos lish_li: li width marginr_li: li margin right*/var agora = 1; WRAP; 1) {// inicialize, o próximo $ ("#switchpic"). Find ("li"). Tamanho (); offset = w_li + marginr_li; w_li + marginr_li; w_li+marginr_li; BTNSHOW (); switchpic.init ({prebtn: $ (". Arrowbtn-left"), nextbtn: $ (". Arrowbtn-right"), envolve: $ ("#switchpic")}); </script> </html>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.