Slideshow mờ ảo [Lưu Trữ] - HOA HỌC TRÒ (Matnauhoctro)

JavaScriptBank

22-11-2009, 07:52 PM

Một đoạn mã JavaScript (http://www.javascriptbank.com/javascript/) khác để tạo hiệu ứng ảnh thay đổi mờ ảo trên trang web.... chi tiết (http://www.javascriptbank.com/fading-slide-show.html/vi//) tại JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)

http://www.javascriptbank.com/javascript.images/image/fading-slide-show.jpg (http://www.javascriptbank.com/javascript/image/slideshow/fading-slide-show/preview/vi/)
Demo: Slideshow mờ ảo (http://www.javascriptbank.com/fading-slide-show.html/vi/)
| Fading Slide Show (http://www.javascriptbank.com/fading-slide-show.html)

Cách cài đặt

Bước 1: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript

<script>
/*
Original: CodeLifter.com ([email protected])
Web Site: http://www.codelifter.com
*/

// set the following variables
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'logojs.gif'
Pic[1] = 'photo3.jpg'
Pic[2] = 'logojs.gif'
Pic[3] = 'photo5.jpg'
Pic[4] = 'photo2.jpg'

// do not edit anything below this line

var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply ()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play( )
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>


Bước 2: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML

<body onLoad="runSlideShow()">
<img id="VU" src="logojs.gif" name='SlideShow'>
</body>


Hiệu ứng cùng chức năng
- Bàn phím ảo (http://www.javascriptbank.com/virtualkeyboard-index.html/vi/)
- Chữ mờ dần (http://www.javascriptbank.com/javascript-crossfader.html/vi/)
- Kĩ thuật làm mờ màu nền (http://www.javascriptbank.com/fade-anything-technique.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Hình ảnh (http://www.javascriptbank.com/javascript/image/vi/) và Trình diễn ảnh (http://www.javascriptbank.com/javascript/image/slideshow/vi/)

Bảng đăng nhập (http://www.javascriptbank.com/forum/giup-em-co-cai-bang-dang-nhap-nhu-cua-trang-chu-t636.html) - Cách tạo id động (http://www.javascriptbank.com/forum/xin-code-tao-id-tu-dong-t351.html) - Hiệu ứng phóng to thu nhỏ ảnh với javascript (http://www.javascriptbank.com/vi+title=phóng to thu nhỏ)