Tạo slideshow cho ảnh bằng Javascript

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

1 nhận xét

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

    Trả lờiXóa