ดังที่แสดงในรูป
เอฟเฟกต์การสลับภาพนั้นใช้งานง่ายมากและมีความเข้ากันได้ดี
หน้า HTML มีดังนี้
การคัดลอกรหัสมีดังนี้:
<div>
<div id = "โฟกัส">
<ul>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/01.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/02.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/03.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/04.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/05.jpg"/> </a> </li>
</ul>
</div>
</div> <!-Wrapper End->
</body>
สไตล์ CSS
การคัดลอกรหัสมีดังนี้:
<style type = "text/css">
* {มาร์จิ้น: 0; Padding: 0;}
ร่างกาย {ตัวอักษรขนาด: 12px; สี:#222; Font-Family: Verdana, Arial, Helvetica, Sans-Serif; พื้นหลัง:#f0f0f0;}
.ClearFix: หลังจาก {เนื้อหา: "."; แสดง: บล็อก; ความสูง: 0; ชัดเจน: ทั้งสอง; ทัศนวิสัย: ซ่อน;}
.ClearFix {ซูม: 1;}
ul, li {list-style: none;}
img {border: 0;}
.Wrapper {width: 800px; มาร์จิ้น: 0 อัตโนมัติ; Padding-bottom: 50px;}
/ * qqshop focus */
#focus {width: 800px; ความสูง: 280px; ล้น: ซ่อน; ตำแหน่ง: ญาติ;}
#focus ul {ความสูง: 380px; ตำแหน่ง: สัมบูรณ์;}
#focus ul li {float: ซ้าย; ความกว้าง: 800px; ความสูง: 280px; ล้น: ซ่อน; ตำแหน่ง: ญาติ; พื้นหลัง:#000;}
#focus ul li div {ตำแหน่ง: สัมบูรณ์; ล้น: ซ่อน;}
#focus .btnbg {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 800px; ความสูง: 20px; ซ้าย: 0; ด้านล่าง: 0; พื้นหลัง:#000;}
#focus .btn {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 780px; ความสูง: 10px; Padding: 5px 10px; ขวา: 0; ด้านล่าง: 0; TEXT-ALIGING: Right;}
#focus .Btn Span {display: inline-block; _display: อินไลน์; _zoom: 1; ความกว้าง: 25px; ความสูง: 10px; _font-size: 0; ขอบซ้าย: 5px; เคอร์เซอร์: ตัวชี้; พื้นหลัง: #FFF;}
#focus .btn span.on {พื้นหลัง: #fff;}
#focus .prenext {width: 45px; ความสูง: 100px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 90px; ความเป็นมา: URL (img/sprite.png) ไม่ต้องทำซ้ำ 0 0; เคอร์เซอร์: ตัวชี้;}
#focus .pre {ซ้าย: 0;}
#focus .Next {ขวา: 0; ตำแหน่งพื้นหลัง: ด้านบนขวา;}
</style>
สคริปต์ JS
การคัดลอกรหัสมีดังนี้:
$ (function () {
var swidth = $ ("#focus"). width (); // รับความกว้างของแผนที่โฟกัส (พื้นที่แสดงผล)
var len = $ ("#focus ul li"). ความยาว; // รับจำนวนภาพโฟกัส
ดัชนี var = 0;
var pictimer;
// รหัสต่อไปนี้เพิ่มปุ่มตัวเลขและแถบโปร่งแสงด้านหลังปุ่มรวมถึงปุ่มสองปุ่มในหน้าก่อนหน้าและหน้าถัดไป
var btn = "<div class = 'btnbg'> </div> <div class = 'btn'>";
สำหรับ (var i = 0; i <len; i ++) {
btn += "<span> </span>";
-
btn += "</div> <div class = 'prenext pre'> </div> <div class = 'prenext next'> </div>";
$ ("#โฟกัส"). ภาคผนวก (BTN);
$ ("#focus .btnbg"). CSS ("ความทึบ", 0.5);
// เพิ่มสไลด์เมาส์ในกรณีสำหรับปุ่มเล็ก ๆ เพื่อแสดงเนื้อหาที่เกี่ยวข้อง
$ ("#focus .btn span"). css ("ความทึบ", 0.4) .mouseenter (function () {
index = $ ("#focus .btn span"). index (this);
Showpics (ดัชนี);
}). eq (0) .trigger ("Mouseenter");
// หน้าก่อนหน้าและปุ่มหน้าถัดไปการประมวลผลความโปร่งใส
$ ("#focus .prenext"). css ("ความทึบ", 0.2). hover (function () {
$ (นี่) .STOP (จริง, เท็จ) .animate ({"ความทึบ": "0.5"}, 300);
},การทำงาน() {
$ (นี่) .STOP (จริง, เท็จ) .animate ({"ความทึบ": "0.2"}, 300);
-
// ปุ่มหน้าก่อนหน้า
$ ("#focus .pre") คลิก (function () {
ดัชนี -= 1;
if (index == -1) {index = len - 1;}
Showpics (ดัชนี);
-
// ปุ่มหน้าถัดไป
$ ("#focus .next") คลิก (function () {
ดัชนี += 1;
if (index == len) {index = 0;}
Showpics (ดัชนี);
-
// ตัวอย่างนี้คือการเลื่อนไปทางซ้ายและขวานั่นคือองค์ประกอบ LI ทั้งหมดลอยไปทางซ้ายในแถวเดียวกันดังนั้นความกว้างขององค์ประกอบ UL รอบนอกจะต้องคำนวณที่นี่
$ ("#focus ul"). css ("ความกว้าง", Swidth * (len));
// การเล่นอัตโนมัติหยุดเมื่อเมาส์เลื่อนบนภาพโฟกัสและเริ่มต้นเมื่อเมาส์เลื่อนออก
$ ("#focus"). hover (function () {
ClearInterval (Pictimer);
},การทำงาน() {
pictimer = setInterval (function () {
Showpics (ดัชนี);
ดัชนี ++;
if (index == len) {index = 0;}
}, 4000); // 4000 นี้แสดงถึงช่วงเวลาของการเล่นอัตโนมัติหน่วย: มิลลิวินาที
}). Trigger ("Mouseleave");
// แสดงฟังก์ชั่นรูปภาพแสดงเนื้อหาที่เกี่ยวข้องตามค่าดัชนีที่ได้รับ
ฟังก์ชั่น showpics (ดัชนี) {// สวิตช์สามัญ
var nowleft = -index*swidth; // คำนวณค่าซ้ายขององค์ประกอบ UL ตามค่าดัชนี
$ ("#focus ul"). หยุด (จริง, เท็จ) .animate ({"ซ้าย": nowleft}, 300); // เลื่อนองค์ประกอบ UL ผ่าน antiMAT () ไปยังตำแหน่งที่คำนวณได้
// $ ("#focus .btn span"). RemoveClass ("on"). eq (ดัชนี) .addclass ("on"); // สลับเป็นเอฟเฟกต์ที่เลือกสำหรับปุ่มปัจจุบัน
$ ("#focus .btn span"). หยุด (จริง, เท็จ) .animate ({"ความทึบ": "0.4"}, 300) .eq (ดัชนี). Stop (จริง, เท็จ) // สลับเป็นเอฟเฟกต์ที่เลือกสำหรับปุ่มปัจจุบัน
-
-
ใช้รูปภาพสลับซ้ายและขวา