หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

เว็บไซต์กับผู้ดูแล-Carousel

เว็บไซต์แรกที่ฉันเคยสร้าง (การเปลี่ยนแปลงอาชีพครั้งที่สามและสุดท้ายของฉัน) ฉันเริ่มต้นจากเทมเพลต HTML และ CSS ซึ่งฉันลงเอยด้วย reworte 90% ของพวกเขา

โฮมเพจนั้นเรียบง่าย (พาฉันไปสักพักหนึ่งสำหรับการสร้างครั้งแรกของฉันเพื่อให้มั่นใจว่าสไตล์การจัดแต่งและคุณสมบัติที่เหมาะสมคือการใช้เวลานานประสบการณ์การเรียนรู้ที่ยอดเยี่ยม) ช่องค้นหาไม่ทำงานอย่างสมบูรณ์ มันทำหน้าที่เหมือนแบบเลื่อนลงในตอนนี้

หน้ารายละเอียดมีม้าหมุนแบบไดนามิกที่ฉันสร้างขึ้น จำนวนการ์ดในม้าหมุนสามารถเปลี่ยนแปลงได้โดยการอัปเดต TeamData ความกว้างของมันจะเปลี่ยนไปตามขนาดของหน้าต่างและลูกศรซ้าย/ขวาจะปรากฏขึ้นเมื่อม้าหมุนสามารถเลื่อนไปในทิศทางที่สอดคล้องกัน

วิธีการไปที่หน้าเว็บด้วย Carousel ที่กำหนดเอง:

  1. ไปที่ detial.html โดยตรงหรือจาก index.html ...
  2. พิมพ์ "ux d" ในช่องค้นหา
  3. คลิกที่ "UX Designer" ในรายการดรอปดาวน์
  4. ม้าหมุนที่กำหนดเองของฉันอยู่ด้านล่างส่วนหัว

ขั้นตอนต่อไป:

  • แยกส่วนม้าหมุนจาก main.js และสร้าง carousel.js (เสร็จแล้ว)
  • แผนที่เส้นทางอาชีพเริ่มต้นที่สมบูรณ์ (เสร็จแล้ว)
  • กำจัดชื่อซ้ำในรายการค้นหา (เสร็จแล้ว)
  • เพิ่ม "x" ในช่องค้นหา (เสร็จแล้ว)
  • การ จำกัด ผลรายการการค้นหาที่ด้านล่างของหน้าต่างและเพิ่มแถบเลื่อน (เสร็จแล้ว)
  • ปรับแต่งแผนที่เส้นทางอาชีพดังนั้น DOT ด้านซ้ายจะปรากฏขึ้น (เสร็จสิ้น; ปรับโครงสร้างให้ใช้ 3 คอลัมน์แทน 2)
  • Word ห่อชื่อในแผนที่เส้นทาง (ต่ำ)
  • คิดว่า SVG ทำงานอย่างไรและเปลี่ยนสีอื่นนอกเหนือจากสีดำ (เสร็จแล้ว)
  • หักเห HTML ดังนั้นแท็ก "li" ทั้งหมดคือ JS ขับเคลื่อนแทนรหัสยาก (เสร็จแล้ว)
  • รายการข้อมูลในไฟล์แยกต่างหาก รายการค้นหาแหล่งที่มาจากแหล่ง SMAE แทนที่จะสร้างรายการอื่น (เสร็จแล้ว)
  • ทบทวนรหัสกล่องค้นหาและ CSS อีกครั้งเพื่อให้เป็นส่วนประกอบได้มากกว่า (อยู่ระหว่างดำเนินการ 70%)
  • แปลงทั้งหมดเป็น react.js เป็นองค์ประกอบ

ขอบคุณสำหรับการเยี่ยมชม

เทคโนโลยี:

จาวาสคริปต์ธรรมดา, HTML, CSS

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด