javascript Slide Image - Tạo Slide ảnh bằng javascript

Trong bài viết này tôi hướng dẫn bạn tạo Slide trình bày ảnh khá đẹp, giống với các hiệu ứng mà ta hay gặp trong Flash. Nhưng ở bài này là dùng javascript để thực hiện javascript, Slide, Images, Flash,

Trong bài viết này tôi hướng dẫn bạn tạo Slide trình bày ảnh khá đẹp, giống với các hiệu ứng mà ta hay gặp trong Flash. Nhưng ở bài này là dùng javascript để thực hiện javascript, Slide, Images, Flash,

Có bạn hỏi trong diễn đàn truy cập theo liên kết của diền đàn đó thấy có cái Slide ảnh trình diễn bằngjavascript thấy cũng hay và view source của nó lên thực hiện cũng dễ nên chia sẻ lên hmweb để các bạn tham khảo biết đâu bạn cũng thấy nó hay và có thể áp dụng vào trang của bạn.

Bước 1 bạn tạo file JS (slide.js) với nội dung như sau:

var preloadedimages=new Array() for (i=0;i<photos.length;i++){ preloadedimages[i]=new Image() preloadedimages[i].src=photos[i] } function applyeffect(){ if (document.all && document.images.photoslider.filters){ document.images.photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23) document.images.photoslider.filters.revealTrans.stop() document.images.photoslider.filters.revealTrans.apply() } } function playeffect(){ if (document.all && document.images.photoslider.filters) document.images.photoslider.filters.revealTrans.play() } function keeptrack(){ window.status="Image "+(which+1)+" of "+photos.length } function doSlideShow(){ if (which==photos.length-1) which=-1 which++ applyeffect() document.images.photoslider.src=photos[which] playeffect() keeptrack() } function transport(){ //window.location=photoslink[which] popupCoop(); }

Bước 2: Tại nơi bạn muốn hiển thị Slide anh bạn dùng đoạn code sau:

<script> var photos=new Array() var which=0 var pause=4000; photos[0]= "Anh1.jpg"; photos[1]= "Anh2.jpg"; photos[2]= "Anh3.jpg"; photos[3]= "Anh4.jpg"; photos[4]= "Anh1.jpg"; photos[5]= "Anh6.jpg"; photos[6]= "Anh7.jpg"; </script> <script type="text/javascript" language="javascript" src="slide.js"></script> <SCRIPT language="javascript"> document.write('<img src="'+photos[0]+'" name="photoslider" id="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>') setInterval("doSlideShow()",pause) </SCRIPT>

Bạn cần thay đổi giá trị các photos[i]= bằng đường dẫn ảnh của bạn và muốn tạo slide bao nhiêu ảnh bạn cứ việc add thêm vào là được
Kết quả khi chạy:



Nguồn: thietkewebsmart.com