Примеры в этой статье делятся функцией левого и правого переключения JS для вашей ссылки. Конкретный контент заключается в следующем
Изображение воспроизведения:
<html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = edge"> <title> </title> <link rel = "stylesheet" href = "http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css"/> <!-инициализация страницы CSS и страница Com-wears CSS-> <стиль тип = "Text/css"> @Charset "UTF-8"; html, body {фоновое цветное: #f6f5f5; } .vg-body {width: 1390px; Поле: 0 Авто; } /*Значение роста задачи* / .vg_title {font-size: 24px; высота линии: 24px; Заполнение: 20px 0; Цвет: #464646; } .vg_task {founal-color: #fff; позиция: относительно; / Верх: 70px; Ширина: 16px; Высота: 20px; курсор: указатель; } .vg_task .ArrowBtn-left {слева: 40px; Граница: 1px твердый красный; Фон: URL (../ Изображения/Стрелка-left.png) без повторного перепонки; ; } .vg_task .ArrowBtn-Right {right: 40px; Граница: 1px твердый красный; Фон: URL (../ Изображения/Стрелка вправо.png) no-repeat; ; } .vg_tasklist {width: 1200px; переполнение: скрыто; Поле: 0 Авто; } .vg_tasklist ul {ширина: 999%; } .vg_tasklist li {width: 258px; Высота: 130px; Плавание: осталось; Граница: 1PX SOLID #C8C8C8; Покрас: 15px 53px 15px 0; позиция: относительно; } .vg_tasklist li .task_hover {position: Absolute; слева: -1px; Верх: -1px; Ширина: 212px; Заполнение: 20px 25px 20px 23px; Высота: 90px; Пограничный подъем: 2PX SOLID #E65A5A; переполнение: скрыто; фоновый цвет: #f0f0f0; дисплей: нет; } .vg_tasklist li: hover .task_hover {display: block; } .task_hover .task_desc {font-size: 16px; высота линии: 20px; Цвет: #646464; } .task_hover .task_limittimes {font-size: 14px; Цвет: #787878; Плавание: осталось; надоеволок: 12px; } .vg_tasklist li img {float: left; Маржа: 22px 8px 20px 20px; } .vg_tasklist li .rightInfo {ширина: 136px; Плавание: осталось; Текст-альбом: Центр; } .rightInfo h3 {font-size: 16px; Цвет: #646464; надоеволок: 15px; } .rightInfo p {font-size: 14px; высота линии: 26px; Цвет: #787878; } .rightInfo a, .task_hover a {display: block; Текст-альбом: Центр; Ширина: 96px; Высота: 30px; высота линии: 30px; Граница: 2PX SOLID #E65A5A; граница радий: 5px; размер шрифта: 16px; шрифт-вес: 700; Цвет: #E65A5A; / Цвет: #fff; Пограничный цвет: #B4B4B4; Курсор: по умолчанию; } .rightInfo a {margin: 12px Auto 0; } .task_hover a {float: right; маржинальная версия: 18px; Право маржи: -4PX; } .task_hover a: Hover {text-decoration: none; фоновый цвет: #E65A5A; Цвет: #fff; } /*GRID-1230* / .GRID-1230 .VG-BODY {ширина: 1210px; } .grid-1230 .vg_tasklist {width: 1090px; } .grid-1230 .vg_tasklist li {маржи-право: 16px; } .grid-1230 .vg_task .ArrowBtn-left {слева: 33px; } .grid-1230 .vg_task .ArrowBtn-Right {right: 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 {слева: 30px; } .grid-1010 .vg_task .ArrowBtn-Right {right: 30px; } .grid-1010 .vg_growth_table {padding: 24px; } </style> <!-Добавлен стиль CSS, название может быть изменено в соответствии с конкретными потребностями-> <script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script> window.onresize = function () {varwidth = document.body.cleient.client. 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 ("не знаю!"); }} </script> </head> <body id = "body"> <script> // Инициализировать суждение стиля отображения статуса, поместите его после корпуса 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 ("не знаю!"); } </script> <div> <!-Начнется значение роста задачи-> <div> <p> Значение роста задачи </p> </div> <div> <div> </div> <d Div> </div> <div> <ul id = "switchpic"> <li> <img src = "Image/task_year.png"> <div> <h2> open adembership </Hyear.png "> <d Div> <h3>. Значение <pran> 200 </span> точки </p> <a href = "javascript :;" Завершенное> </a> </div> <d Div> <p> Открытое годовое членство за один раз (12 месяцев и выше) </p> <p> Ежемесячный лимит <pran> 1 </span> раз </p> <a href = "javascript :;" src = "Images/task_lianxubaoyue.png"> <div> <h3> открытая непрерывная ежемесячная подписка </h3> <p> Значение роста вознаграждения <pran> 10 </span> points </p> <a href = "Javascript :; <pran> 1 </span> время </p> <a href = "javascript :;"> перейти к завершению> </a> </div> </li> <li> <img src = "Images/task_year.png"> <viv> <h3> overgrab href = "javaScript :;"> перейти к завершению> </a> </div> <d Div> <p> открытое годовое членство за один раз (12 месяцев и выше) </p> <p> Ежемесячный лимит <pran> 1 </span> </p> <a href = "Javascript :; <p> Ежемесячный лимит <pran> 1 </span> время </p> <a href = "javascript :;"> перейти к завершению> </a> </div> </li> <li> <img src = "Images/task_year.png"> <hop> <h3> Следуйте официальной учетной записи Wechat </h3> <p> reward value Grown> 10 <p> 10 <p> 10 <P> 10 <P> 10 <P> 10 <P> </p Span> 10 <P> </p -span> 10 <P> 10 <P> 10 <P> 10 <P> <H3>. href = "javascript :;"> перейти к завершению> </a> </div> <d Div> <p> открытое годовое членство за один раз (12 месяцев и выше) </p> <p> Ежемесячный лимит <pran> 1 </span> раз </p> <a href = "javascript :; src = "Images/task_year.png"> <div> <h3> Задача 555555555 </h3> <p> Значение роста вознаграждения <pran> 10 </span> point </p> <a href = "Javascript :;"> Дополнить> </a> </div> <D Div> <p> Открыть годовое членство. <pran> 1 </span> время </p> <a href = "javascript :;"> для завершения> </a> </div> </li> <li> <img src = "Images/task_year.png"> <div> <h3> задача 66666666 </h3> <p> reward grovid value <pan> 10 </span> point> point </p> popt </p> pope </p> popt </p> pope </p> point </p> pope </p> point </p> pope </p> point </P./P. pope </p> point </pton </P./P. popt </P./P. href = "javascript :;"> для завершения> </a> </div> <div> <p> открытое годовое членство за один раз (12 месяцев и выше) </p> <p> Ежемесячный лимит <pran> 1 </span> </p> <a href = "Javascript :; src = "Images/task_year.png"> <div> <h3> task77777777 </h3> <p> Значение роста вознаграждения <pran> 10 </span> point </p> <a href = "javascript :;"> Дополнить> </a> </div> <D Div>. <pran> 1 </span> время </p> <a href = "javascript :;"> для завершения> </a> </div> <d Div> <p> Открытое годовое членство за один раз (12 месяцев и выше) </p> <p> Line <pan> 1 </span> </p> <a href = "javascript :; </div> <!-Конец значения роста задачи-> </div> </body> <script> // Рост задачи var switchcic = (function () {/*Теперь: сколько лилинов в настоящее время: сколько лилинейков всего: сколько lish_li: li width marginr_li: li right margin*/var = 1; 1; var linum, offset, wisset, marini, wi_li, wis, wistip, wis_l, wis_l, wistip, wi_risti. Далее, функция; 1) {/ Инициализируется, только pre.hide (); $ ("#SwitchPic"). Найдите ("li"). Size (); offset = w_li + marginr_li; W_LI + MARGINR_LI; MARGINR_LI; raw.stop (true) .animate ({"margin -left": -(Теперь -1) * offset}); switchpic.init ({prebtn: $ (". arrowbtn-left"), nextbtn: $ (". arrowbtnt-right"), wrap: $ ("#switchpic")}); </script> </html>Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.