"Tạo slideshow cho ảnh bằng Javascript"

(Traidatmui.com) – Hiện nay có rất nhiều phần mềm và nhiều trang web hổ trợ cho việc tạo slide cho hình ảnh rất dễ dàng. Slide ảnh là chúng ta sẽ cho các hình ảnh thay đổi qua lại trong một khoảng thời gian nào đó. Cũng sủ dụng tính năng trình chiếu đó, mình xin giới thiệu cho các bạn các tạo slide ảnh mà không cần sự hỗ trợ của phần mềm hay các trang web. Ở đây mình sử dụng slide show bằng "Javascript", việc này sẽ rất có ích khi bạn muốn tạo trang trình chiếu cho blog của mình.

1. Đăng nhập vào tài khoản blog
2. Tạo HTML/Javascript và dán code bên dưới vào
<script language="JavaScript1.2">
var variableslide=new Array()

//variableslide[x]=["Link hình ảnh", "Liên kết cho ảnh", ""]

variableslide[0]=['Link hình ảnh', 'Liên kết cho ảnh', '']
variableslide[1]=['Link hình ảnh', 'Liên kết cho ảnh', '']
variableslide[2]=['Link hình ảnh', 'Liên kết cho ảnh', '']

var slidewidth='130px' // Độ rông của khung slide
var slideheight='120px' // Chiều cao của slide
var slidebgcolor='#F3F3F3'

var slidedelay=3000 // Thời gian thay đổi ảnh

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img width="700" height="480" src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>
<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgcolor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>
Lưu ý:
- Hãy thay các code màu cam thành link ảnh của bạn và các code màu đỏ thành liên kết của hình ảnh tương ứng.
- Dựa vào hướng dẫn trên để chỉnh sửa lại cho phù hợp
- Code màu xanh đậm ở trên là chiều cao và độ rông của ảnh bạn có thể thay đổi chúng cho phù hợp với ảnh của bạn.
- Ở trên mình chỉ tạo slide cho 4 ảnh, bạn có thể thêm nhiều ảnh hơn bằng cách thêm code màu xanh tương tự bên dưới.
variableslide[1]=['Link hình ảnh', 'Liên kết cho ảnh', '']
variableslide[2]=['Link hình ảnh', 'Liên kết cho ảnh', '']
variableslide[3]=['Link hình ảnh', 'Liên kết cho ảnh', '']
variableslide[4]=['Link hình ảnh', 'Liên kết cho ảnh', '']
variableslide[5]=['Link hình ảnh', 'Liên kết cho ảnh', '']
variableslide[6]=['Link hình ảnh', 'Liên kết cho ảnh', '']
3. Chỉnh sửa chúng lại cho phù hợp và save lại
Chúc bạn thành công

Xem khác cùng chủ đề

1 nhận xét | Viết lời bình

7/08/2012 06:52:00 CH Trả lời

Bạn có thể cho 1 demo được không, thanks bạn lắm tranquoc2810@gmail.com

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang