WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

pageAnimate Web-Page Slider

— Add-on เพื่อ WorldWideScripts.net

สมัครสมาชิกฟีด ของเรา จะอยู่ถึง วันที่ !

ใหม่! ติดตามเรา ตามที่คุณต้องการ!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



นี้ปลั๊กอิน jQuery เป็นตัวเลื่อนหน้าเต็มรูปแบบสำหรับการนำระหว่างหน้าเว็บ ตัวอย่างเช่นคุณอาจมีหน้าบ้านของคุณในหนึ่งสไลด์หน้าติดต่ออีกและอื่น ๆ มันมีการตอบสนองและทำงานในเบราว์เซอร์ที่สำคัญทั้งหมดรวมทั้ง Internet Explorer 6 ( : o ) และเบราว์เซอร์มือถือ

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

แม้ว่านี้ถูกออกแบบมาสำหรับเนื้อหาหน้าต่างเต็มคุณสามารถได้อย่างง่ายดายเพียงแค่ใช้นี้เป็นเนื้อหาเลื่อน jQuery แบบดั้งเดิม. ในความเป็นจริง pageAnimate อาจจะดีกว่าการเลื่อนอื่น ๆ เพราะมันทำงานสวยงามใน Internet Explorer 6!

หมายเหตุ: หากคุณดูตัวอย่าง CodeCanyon ในเบราว์เซอร์มือถือ, การแสดงผล CodeCanyon จะไม่ทำงานเลย คุณต้องไป http://creativewebsites.me/pageAnimate/preview ที่จะเห็นมันในการดำเนินการ

รุ่น 1.1 UPDATE

เวอร์ชั่น 1.1 มาพร้อมกับสองคุณสมบัติใหม่: ความสามารถในการให้แต่ละสไลด์ URL ที่ไม่ซ้ำ (มีการใช้กัญชา) และฟังก์ชั่นอัตโนมัติที่ก้าวหน้าเพื่อให้เลื่อนรอบโดยอัตโนมัติผ่านภาพนิ่งทั้งหมดอย่างต่อเนื่อง ทั้งสองไม่สามารถเปิดใช้งานได้ในเวลาเดียวกัน (ฉันไม่สามารถคิดว่าทุกคนที่ต้องการที่อยู่แล้ว)

หากคุณมีรุ่นก่อนหน้านี้การติดตั้งและคุณปรับปรุงรุ่นนี้ให้แน่ใจว่าคุณ hardcode ของข้อมูลสไลด์ = "0" 'แอตทริบิวต์ลงใน div ที่มีระดับของ.pageAnimate เช่นดังนั้น:

 <div class = "pageAnimate" ข้อมูลสไลด์ = "0"> </ div> 

นอกจากนี้คุณยังจะต้องเพิ่มระดับต่อไปของทุกสไลด์เรียก:.pageAnimate_trigger

เกิดอะไรขึ้นถ้าจาวาสคริปต์?

ปลั๊กอินนี้จะทำงานหลักใน JavaScript - แต่สิ่งที่ถ้า JavaScript ถูกปิดใช้งาน? เป็นแถบเลื่อนไร้ประโยชน์ (และนั่นหมายความว่าคนเท่านั้นที่สามารถดูหน้าแรกของคุณ) ไม่มีแน่นอนไม่ได้ คุณสามารถเพิ่มทางเลือกการเชื่อมโยง 'href' เพื่อเรียกว่าไปที่ภาพนิ่ง ดังนั้นเมื่อปิดการใช้งาน JavaScript เป็นทริกเกอร์นี้จะไม่ไปที่ภาพนิ่งใน pageAnimate แต่ก็จะดำเนินการตามปกติไปยังหน้าอื่น (ซึ่งคุณกำหนดไว้ใน 'href)

ไม่เลื่อน pageAnimate ดึงเนื้อหาจากหน้าเว็บอื่น ๆ

ไม่มีปลั๊กอินตัวเองไม่ได้ดึงเนื้อหาจากหน้าเว็บอื่น ๆ แม้ว่าคุณจะสามารถทำเช่นนั้นที่มีเพียงไม่กี่บรรทัดของอาแจ็กซ์หรือโค้ด PHP สคริปต์ตัวเองไม่ได้มีการทำงานที่และเนื้อหาของสไลด์ / หน้าของแต่ละคนจะต้องเพิ่มด้วยตนเอง ที่จะดึงเนื้อหาจากเว็บเซิร์ฟเวอร์ของคุณกับอาแจ็กซ์เพียงแค่ใช้รหัสนี้
 <ชนิดสคริปต์ = "text / javascript ของ"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(เพียงแค่เปลี่ยน #slide_id_or_class "เพื่อรหัส CSS หรือระดับของภาพนิ่ง pageAnimate ที่คุณต้องการที่จะเพิ่ม)

ดังนั้นฉันจะให้เลื่อนไปเลื่อนหรือไม่?

มันไม่อาจจะง่าย - เพียงแค่เพิ่มรหัสนี้
 <a class="pageAnimate_trigger pageAnimate_trigger1"> ข้อความนี้จะไปที่จะเลื่อน 2 </a> 
แจ้งให้ทราบจำนวนที่เพิ่มให้กับส่วนท้ายของชื่อชั้น? ที่จำนวนน้อยที่กำหนดสิ่งที่สไลด์จะเคลื่อนไหวไป แต่เนื่องจากทุกอย่างใน JavaScript เป็น zero-based (อดทนกับฉันที่นี่) เราต้องลบ 1 ออกหมายเลขภาพนิ่ง ดังนั้นตัวอย่างเช่นถ้าเราต้องการเลื่อนไปที่จะเลื่อน # 4 เมื่อข้อความที่มีการคลิกเราจะเพิ่มระดับนี้: "pageAnimate_trigger 3" ถ้าเราต้องการที่จะเลื่อนไปเลื่อน # 6 เราจะเพิ่มระดับนี้: "pageAnimate_trigger 5" ดังที่ได้กล่าวข้างต้นคุณสามารถเพิ่มการเชื่อมโยงไปยังแท็กสมอซึ่งสามารถปฏิบัติตามเมื่อ JavaScript ถูกปิดใช้งาน ดังนั้นนั่นหมายความว่าผู้เข้าชมจะยังคงสามารถที่จะดูหน้าโคลนที่อื่น ๆ บนเว็บไซต์ของคุณหากพวกเขาได้ปิดใช้งาน JavaScript

ฉันต้องด้วยตนเองเพิ่มลิงค์ไปยังสไลด์ทุกคน?

ไม่ได้ทั้งหมด - สคริปต์ไม่ทำงานทุกอย่างให้คุณ

ฉันจะทำให้เรื่องนี้เป็นเนื้อหาเลื่อนปกติและไม่เลื่อนหน้าเว็บได้อย่างไร

ง่าย - ทั้งหมดที่คุณทำคือการเปลี่ยนเส้นเดียวในการตั้งค่าของสคริปต์ jQuery คุณจะต้องมี div (หรือแท็กอื่นที่คล้ายกัน) เป็นภาชนะสำหรับเลื่อน pageAnimate เพียงแค่กำหนด div ว่าในสคริปต์

มีปัญหาใด ๆ หรือข้อบกพร่อง?

  1. เมื่อหน้าต่างเบราเซอร์ที่มีการซูมเข้าหรือออกใน IE 8 สไลด์ไม่ได้ปรับขนาดโดยอัตโนมัติจะกลายเป็นแบบเต็มหน้าจอ ฉันได้พยายามสำหรับทุกวัยที่จะหาวิธีการแก้ปัญหา แต่ไม่สามารถ แต่พวกเขาทำเมื่อปรับขนาดหน้าต่างที่เกิดขึ้นจริงถูกลากขนาดเล็กหรือขนาดใหญ่ ซึ่งเป็นเอกลักษณ์ของ IE 8 นี้ไม่ควรจะเป็นเรื่องใหญ่เนื่องจากมีจะไม่เป็นคนจำนวนมากเกินไปซูมเข้าและออกใน IE8
  2. เมื่อใช้ jQuery 1.8.1, Firefox ค้างเมื่อหลายเรียกมีการคลิกอย่างรวดเร็ว ทำงานได้ดีกับ jQuery 1.7.2
  3. เลื่อนนำทางที่สมบูรณ์แบ่งลงเมื่อคุณซูมในมาร์ทโฟน นี้สามารถแก้ไขได้โดยการเพิ่มรหัสนี้ที่ <head> ของเอกสาร HTML ของคุณ:
     <ชื่อ meta = "viewport" content = "width อุปกรณ์ width =; เริ่มต้นขนาด = 1; สูงสุดขนาด = 1"> 
  4. ภาพเคลื่อนไหวเลื่อนที่อาจจะมีความน่ากลัวเล็ก ๆ น้อย ๆ มาร์ทโฟนเก่า - แม้ว่ามันจะไม่เลวร้ายเกินไป

ดาวน์โหลด
ส่วนประกอบอื่น ๆ ในประเภทนี้ส่วนประกอบทั้งหมดของ ผู้เขียนคนนี้
ความเห็นคำถามที่พบบ่อย และคำตอบ

คุณสมบัติ

ที่สร้าง:
13 พฤศจิกายน 12

การปรับปรุงครั้งล่าสุด:
18 พฤษภาคม 13

ความละเอียดสูง:
ใช่

เบราว์เซอร์ที่เข้ากันได้:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

รวมไฟล์:
JS JavaScript, HTML, CSS

ซอฟแวร์เวอร์ชั่น:
jQuery

คำหลัก

อีคอมเมิร์ซ, อีคอมเมิร์ซ, สิ่งของทั้งหมด, และ CSS, html ที่, จาวาสคริปต์, jQuery, เลื่อน jQuery, เลื่อนหน้า, pageAnimate, การให้เลขหน้า, เลื่อนพระราช, เลื่อน