Contoh-contoh dalam artikel ini berbagi fungsi switching kiri dan kanan JS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Gambar reproduksi:
<html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-kompatibel" konten = "IE = edge"> <title> </ title> <tautan rel = "stylesheet" href = "http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css"/> <!-Inisialisasi halaman CSS dan halaman umum CSS-> <style type = "text/css"> @charset "utf-8"; html, body {latar belakang: #f6f5f5; } .vg-body {width: 1390px; margin: 0 otomatis; } /*Nilai pertumbuhan tugas* / .vg_title {font-size: 24px; Line-Height: 24px; Padding: 20px 0; Warna: #464646; } .vg_task {latar belakang-warna: #fff; Posisi: kerabat; } .vg_task .arrowbtn-left, .vg_task .arrowbtn-right {position: absolute; Atas: 70px; Lebar: 16px; Tinggi: 20px; kursor: pointer; } .vg_task .arrowbtn-left {kiri: 40px; Perbatasan: 1px solid red; Latar belakang: url (../ gambar/panah-left.png) no-repeat; ; } .vg_task .arrowbtn-right {kanan: 40px; Perbatasan: 1px solid red; latar belakang: url (../ gambar/panah-right.png) no-repeat; ; } .vg_tasklist {width: 1200px; meluap: tersembunyi; margin: 0 otomatis; } .vg_tasklist ul {lebar: 999%; } .vg_tasklist li {lebar: 258px; Tinggi: 130px; float: kiri; Perbatasan: 1px Solid #C8C8C8; Margin: 15px 53px 15px 0; Posisi: kerabat; } .vg_tasklist li .Task_hover {position: absolute; Kiri: -1px; Atas: -1px; Lebar: 212px; padding: 20px 25px 20px 23px; Tinggi: 90px; Border-Bottom: 2px solid #e65a5a; meluap: tersembunyi; Latar Belakang-Color: #F0F0F0; Tampilan: Tidak Ada; } .vg_tasklist li: hover .task_hover {display: block; } .task_hover .task_desc {font-size: 16px; Line-Height: 20px; Warna: #646464; } .task_hover .task_limittimes {font-size: 14px; Warna: #787878; float: kiri; Padding-top: 12px; } .vg_tasklist li img {float: left; margin: 22px 8px 20px 20px; } .vg_tasklist li .rightInfo {width: 136px; float: kiri; Teks-Align: tengah; } .rightInfo h3 {font-size: 16px; Warna: #646464; Padding-top: 15px; } .rightInfo p {font-size: 14px; Line-Height: 26px; Warna: #787878; } .rightInfo a, .task_hover a {display: block; Teks-Align: tengah; Lebar: 96px; Tinggi: 30px; Line-Height: 30px; Perbatasan: 2px solid #e65a5a; Border-Radius: 5px; font-size: 16px; Font-Weight: 700; Warna: #e65a5a; } .task_hover a.done, .task_hover a.done: hover {background-color: #b4b4b4; Warna: #fff; Border-color: #B4B4B4; kursor: default; } .rightInfo a {margin: 12px auto 0; } .task_hover a {float: benar; margin-top: 18px; margin -kanan: -4px; } .task_hover A: Hover {Text-Decoration: None; latar belakang-warna: #e65a5a; Warna: #fff; } /*grid-1230* / .grid-1230 .vg-body {width: 1210px; } .grid-1230 .vg_tasklist {lebar: 1090px; } .grid-1230 .vg_tasklist li {margin-right: 16px; } .grid-1230 .vg_task .arrowbtn-left {kiri: 33px; } .grid-1230 .vg_task .arrowbtn-right {kanan: 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 {kiri: 30px; } .grid-1010 .vg_task .arrowbtn-right {kanan: 30px; } .grid-1010 .vg_growth_table {padding: 24px; } </style> <!-Menambahkan gaya CSS, namanya dapat dimodifikasi sesuai dengan kebutuhan spesifik-> <script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script> window.onResize = function () {var winwidth = document. 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 ("Jangan tahu!"); }} </script> </head> <body id = "body"> <script> // inisialisasi penilaian gaya tampilan status, letakkan setelah tubuh 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 ("Jangan tahu!"); } </script> <div> <!-Nilai pertumbuhan tugas dimulai-> <div> <p> Nilai pertumbuhan tugas </p> </div> <div> <viv> </div> <div> </div> <ver> <ul id = "switchpic"> <li> <img src = "gambar/task_year.png"> <li> <li> <h3 src = "gambar/task_year.png"> <li> <li> <h3 src = "gambar/task_year.png"> <li> <li> points</p> <a href="javascript:;">Completed></a> </div> <div> <p>Open annual membership at one time (12 months and above)</p> <p>Monthly limit <span>1</span> times</p> <a href="javascript:;">Completed</a> </div> </li> <li> <img src = "gambar/task_lianxubaoyue.png"> <div> <h3> Buka langganan bulanan kontinu </h3> <p> Nilai pertumbuhan hadiah <span> 10 </span> poin </p> <a href = "JavaScript :;"> BUKU DI SATU DAN PERTANYAAN </a> </Div> <p> <p> Bulan Terbuka dan BUKU DAN PERTANYAAN DI SATU DAN PERTANYAAN DI SEMUA </a> </DIV> <p> <p> <p> tahunan di atas dan satu tahun di satu tahun dan satu tahun dan satu tahun dan satu tahun </a> </Div> <p> <p> <p> bulan tahunan dan satu tahun di satu tahun dan satu tahun dan o. pouch </a> </Div> <p> <p> <span> 1 </span> Waktu </p> <a href = "javaScript:;"> Pergi ke menyelesaikan> </a> </div> </li> <li> <img src = "gambar/Task_year.png"> <h3> Peningkatan ke SVIP </h3> <p> Rentang Rentang Hadiah Nilai Pertumbuhan Rentang Hadiah Rentang Hadiah Rentang Hadiah Nilai pertumbuhan. href = "javascript :;"> Pergi ke menyelesaikan> </a> </div> <div> <p> Buka keanggotaan tahunan pada satu waktu (12 bulan ke atas) </p> <p> Batas bulanan <span> 1 </span> waktu </p> </pref = "JavaScript:;"> Go To Complete> </a> </div> </Div> Divript <pure> <p> Batas Bulanan <span> 1 </span> Waktu </p> <a href = "javaScript:;"> Pergi ke Lengkap> </a> </div> </li> <li> <img src = "gambar/Task_year.png"> <h3> Ikuti akun resmi Wechat </h3er> <power> <p -span> <h3> ikuti akun resmi WCHAT </h3> power <power> <power> </points </points </h3 poin </points </points </points 10 href = "JavaScript:;"> Pergi ke Complete> </a> </div> <v> <p> Buka keanggotaan tahunan pada satu waktu (12 bulan ke atas) </p> <p> Batas bulanan <span> 1 </span> kali </p> <a href = "JavaScript:;"> Go To Complete> </a> </Div> src="images/task_year.png"> <div> <h3>Task 555555555</h3> <p>Reward growth value<span>10</span>point</p> <a 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> Waktu </p> <a href = "javaScript:;"> to complete> </a> </div> </li> <li> <img src = "Images/Task_year.png"> <h3> TUGAS 66666666 </h3> <p> Rentang Rentang POIN POIN POIN POIN POIN POIN POIN POIN POIN POIN POINE 66666666 </H3> <p> href = "javascript:;"> to complete> </a> </div> <div> <p> Buka keanggotaan tahunan pada satu waktu (12 bulan ke atas) </p> <p> Batas bulanan <span> 1 </span> waktu </p> <a href = "javascript:;"> untuk menyelesaikan> </a> </div> </li> src="images/task_year.png"> <div> <h3>Task7777777</h3> <p>Reward growth value<span>10</span>point</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> Waktu </p> <a href = "javascript:;"> to complete> </a> </div> <v> <p> Keanggotaan tahunan pada satu waktu (12 bulan ke atas) </p> <p> Batas bulan <pan> 1 </span> </p> <a href = "javascript:;" </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, Bungkus init (o) {pre = o.prebtn; 1) Inisialisasi, hanya pra -Hidaman (); $ ("#switchpic"). Find ("Li"). Size (); Offset = W_LI + MARGINR_LI; w_li + marginr_li;} lain jika ("#body") +marginr_li;}} function bindbtn () {btnshow () wrap.stop (true) .anime ({"margin -left": -(sekarang -1) * offset})); switchpic.init ({prebtn: $ (". arrowbtn-left"), nextBtn: $ (". arrowbtn-right"), bungkus: $ ("#switchpic")}); </script> </html>Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.