TẠO SLIDESHOW ẢNH (Kiểu 2)

Bài trước, tôi đã giới thiệu cho các bạn cách tạo slideshow ảnh kiểu 1 (Xem TẠI ĐÂY). Tiếp tục bài này tôi xin giới thiệu thêm cách TẠO SLIDESHOW ẢNH (kiểu 2).

Ở kiểu 2 này, các ảnh này sẽ được trình diễn "chạy" từ bên phải qua bên trái, khi bạn rê chuột vào thì ảnh sẽ "dừng" lại và hiện ra dòng chú thích nhỏ cho ảnh. Khi bạn bấm vào "nó" sẽ dẫn bạn đến trang liên kết mà bạn muốn.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<script type="text/javascript">
//Specify the slider's width (in pixels)
var sliderwidth="500px"
//Specify the slider's height
var sliderheight="300px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[1]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[2]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[3]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[4]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, trong đó sliderwidth (Độ rộng của Slidershow) sliderheight (Chiều cao của Slidershow) sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này
leftrightslide[n+1]='<a href="địa chỉ liên kết"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'.
Trong đó n là số thứ tự của ảnh cuối cùng...

Dán tiếp phía dưới theo thứ tự tăng dần

Ví dụ: ở đoạn code trên Slideshow sẽ có tất cả 5 ảnh được tính từ số 0 đến số 4, bây giờ tôi muốn slideshow có tất cả 10 ảnh thì code sẽ giống như vầy:
 <script type="text/javascript">
..............................
..............................
leftrightslide[0]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[1]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[2]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[3]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[4]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[5]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[6]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[7]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[8]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[9]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'

...............................
..............................
</script>

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

Chúc các bạn thành công!!! 

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀