สไลด์แสดงผลแบบฟองอากาศด้วย jQuery และ Css


เป็นอีบทความหนึ่งที่พูดถึงเรื่องของการสร้าง jQuery วันนี้จะเป็นการใช้รูปแบบอีกอย่างหนึ่งของการพัฒนาสไลน์โชว์ด้วย jQuery โดยรูปแแบการนำเสนอจะเป็นรูปแบบของฟองน้ำโดยถ้าเรานึกถึงการแสดงผลที่เมื่อก่อนการสร้างลูกเล่นที่มีการแสดงผลส่วนใหญ่จะต้องใช้ flash ในการทำงานแต่หลังจากที่เทคโนโลยี jQuery และ css3 ทำให้การทำงานด้วย jQuery เข้ามามีส่วนสำคัญมากในการพัฒนาเว็บไซต์เรียกได้ว่าเป็นอีกเทคนิคหนึ่งที่อยากจะอามาแนะนำกันนะครับลองดาวน์โหลดไปใช้งานกันดูครับน่าสนใจที่เดียว

script.js โค้ดในส่วนของการแก้ไขภาพ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
var photos = [
'http://farm6.static.flickr.com/5230/5822520546_dd2b6d7e24_z.jpg',
'http://farm5.static.flickr.com/4014/4341260799_b466a1dfe4_z.jpg',
'http://farm6.static.flickr.com/5138/5542165153_86e782382e_z.jpg',
'http://farm5.static.flickr.com/4040/4305139726_829be74e29_z.jpg',
'http://farm4.static.flickr.com/3071/5713923079_60f53b383f_z.jpg',
'http://farm5.static.flickr.com/4108/5047301420_621d8a7912_z.jpg'
];
var slideshow = $('#slideShow').bubbleSlideshow(photos);
$(window).load(function(){
slideshow.autoAdvance(5000);
});
// Other valid method calls:
// slideshow.showNext();
// slideshow.showPrev();
// slideshow.stopAutoAdvance();
});

ดาวน์โหลด…..!!!



ขอบคุณข้อมูลจาก http://tutorialzine.com

Comments

comments

Powered by Facebook Comments