การสลับภาพที่ใช้งานได้จริงรองรับการคลิกสลับและม้าหมุนอัตโนมัติ

ฉันบังเอิญเห็นสิ่งเล็ก ๆ น้อย ๆ นี้ที่ฉันเขียนไว้ก่อนหน้านี้และโพสต์สนับสนุนคลิกเพื่อสลับและม้าหมุนอัตโนมัติเพื่อให้สามเณรด้านหน้าดู!

รหัสมีดังนี้:

 <div> <ul> <li> <img src = "img/pic_1.jpg"/> </li> <li> <img src = "img/pic_2.jpg"/> </li> <li> <img src = "img/pic_3.jpg"/> /> </li> <li> <img src = "img/pic_5.jpg"/> </li></ul> <ul> <li> โครงการ 1 </li> <li> โครงการ 2 </li> <li> โครงการ 3 </li> <li> โครงการ 4 </li>

HTML

ที่นี่คุณเพียงแค่ต้องเปลี่ยนเส้นทางภาพไปยังเส้นทางท้องถิ่นของคุณ

 .scroll_div {width: 1000px; ความสูง: 370px; มาร์จิ้น: 0 อัตโนมัติ; Padding: 10px;}. scroll_div .pic {width: 820px; ความสูง: 370px; ล้น: ซ่อน; ตำแหน่ง: ญาติ; ลอย: ซ้าย;}. scroll_div .pic li {width: 820px; ความสูง: 370px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; จอแสดงผล: ไม่มี;}. scroll_div .btn li {width: 173px;}. scroll_div .btn li {width: 173px; ความสูง: 66px; แสดง: บล็อก; ลอย: ซ้าย; TEXT-ALIGN: CENTER; สี: #FFFF; แบบอักษร: 18px/100% "Microsoft Yahei"; Font-Weight: ตัวหนา; ความเป็นมา:#008DD8; มาร์จิ้น-ก้น: 10px; ความสูงของสาย: 66px; เคอร์เซอร์: ตัวชี้;}. scroll_div .btn li.on {พื้นหลัง:#d73737;} li {list-style: none;}

CSS

 $ (function () {var listlen = $ (". pic li"). ความยาว, i = 0, setinter, speen = 3000;/*pic carousel*/$ (". btn li: สุดท้าย"). css ({"margin": "0px 0px 0px 0px"}; Li: First "). show (); $ (". btn li "). แต่ละ (ฟังก์ชั่น (ดัชนี, องค์ประกอบ) {$ (องค์ประกอบ). click (ฟังก์ชั่น () {i = index; $ (นี่) .addclass (" on "). siblings () li "). eq (ดัชนี) .animate ({opacity:" show "}, 300) .siblings (). animate ({ความทึบ:" ซ่อน "}, 300);}) $ (องค์ประกอบ) .hover (ฟังก์ชั่น () {clearInterval (setInter);}, function () listlen) {i ++;} else {i = 0;}; $ (". btn li"). eq (i) .addclass ("on"). พี่น้อง (). RemoveClass ("on"); $ ("pic. li "). eq (i) .animate ({ความทึบ:" show "}, 300) .siblings (). animate ({ความทึบ:" ซ่อน "}, 300);} outplay = function () {setInter = setInterval (" out_fun () ", Speen);