Tạo slideshow cực đẹp cho web của bạn - 28 September 2010 - All 4 You
Monday, 23-Jan-2017, 2:15 AM
Welcome Guest | RSS
Main » 2010 » September » 28 » Tạo slideshow cực đẹp cho web của bạn
9:39 PM
Tạo slideshow cực đẹp cho web của bạn
1. Cách 1



Các bạn copy đoạn code sau và paste vào vị trí nào bạn muốn hiển thị.

Code

<embed type="application/x-shockwave-flash" AllowScriptAccess="never" height="375" width="500"

src="hhttp://all4u.dmon.com/swf/beautifuldreamblogslide.swf" flashvars=

"config=5|0xFFFFFF|0x804040|80|0xFFFFFF|0x9b37FF|0xB66CFF&bcastr_flie= Link anh1|anh2|anh3&bcastr_link=lien kết 1|liên kết 2|link3&bcastr_title=Nd ảnh 1|ND ảnh 2|ND ảnh 3" wmode="transparent"></embed>


Trong đó dòng chữ mày đỏ là link ảnh – dòng chữ màu xanh là link mà các bạn muốn khi click chuột vào ảnh thì nó dẫn tới link đó. 

Mỗi ảnh tương ứng với mỗi link

Chữ số màu vàng là độ rộng và cao của slide. Màu xanh lục là độ rộng và cao của ảnh. 

config=5 Thời gian dừng trình chiếu của mỗi bức ảnh, tăng giảm số đó để tăng giảm thời gian.

Trong đoạn code này: 0xffffff|0x804040|80|0xffffff|0x9b37ff|0xb66cff

Mã màu đầu tiên: là mã của chữ chú thích.

Mã màu thứ 2 là Màu nền của chữ chú thích.

Con số 80, chạy từ 0 đến 100. Nó là độ trong suốt của nền chú thích, con số càng lớn, nền càng trong suốt hơn.

Mã màu thứ 3 là màu của số thứ tự bức ảnh.

Mã màu thứ 4 là màu của nút khi hiện thị ảnh.

Mã màu thứ 5 là màu của nút khi chưa hiện thị ảnh.


2. Cách 2

Thêm 1 cách khác tạo slide show trình chiếu ảnh cho các bạn tham khảo. Ảnh hiển thị ở 2 cách này có phần giống nhau, tuy nhiên hình ảnh xuất hiện ở đây "mượt" và phong phú hơn cách 1 ở trên.



Hãy sửa lại những chỗ màu đỏ cho phù hợp với kích thước ảnh, link ảnh,... rồi paste đoạn code sau vào nơi bạn muốn hiển thị slide nha.

Code
<script type="text/javascript">
<!-- 
var pic_width=400
var pic_height=350
var button_pos=3; 
var stop_time=5000; 
var show_text=0; 
var txtcolor="ffffff"; 
var bgcolor=""; 

var imag=new Array(); 
var link=new Array(); 
var text=new Array(); 

imag[1]="Link ảnh 1"; 
link[1]="Link liết kết tới ảnh 1"; 
text[1]="Nội dung 1"; 
   
imag[2]="Link ảnh 2"; 
link[2]="Link liên kết 2"; 
text[2]="Nội dung 2"; 
   
imag[3]="Link ảnh 3"; 
link[3]="Link liên kết 3"; 
text[3]="Nội dung 3"; 
   
var swf_height=show_text==1?pic_height+0:pic_height; 
var pics="", links="", texts=""; 
for(var i=1; i<imag.length; i++){ 
pics=pics+("|"+imag[i]); 
links=links+("|"+link[i]); 
texts=texts+("|"+text[i]); 
pics=pics.substring(1); 
links=links.substring(1); 
texts=texts.substring(1); 
   
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"  codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"  width="'+ pic_width +'" height="'+ swf_height +
'" style="margin: 0px 0px 0px 0px;">'); 
document.write('<param name="movie" value=" http://all4u.dmon.com/swf/slide.swf ">'); 
document.write('<param name="quality" value="high">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+
'&texts='+texts+'&pic_width='+pic_width+
'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+
'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'">');
document.write('<embed style="margin: 0px 0px 0px 0px;" src=" http://all4u.dmon.com/swf/slide.swf " FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+
'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+
'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+
'" quality="high" width="'+ pic_width +'" height="'+ swf_height +
'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">');
 
document.write('</object>'); 
//--> 
</script> 


3. Cách 3

Các đoạn code sau đều có cách hiển thị ảnh giống nhau, nhưng đoạn code 3.3 v à 3.4 thì có thêm link liên kết cho mỗi ảnh nữa nha.



Code3.1:
<script language="Javascript" type="text/javascript">
var imgArray=["1.jpg","2.jpg","3.jpg"];
</script>
<img id="imagePhoto"
style="FILTER: progid:DXImageTransform.Microsoft.RandomDissolve(); CURSOR: hand"
 height="220" alt="all4u.dmon.com" width="300" />

<script language="Javascript" type="text/javascript">
var currImg=0;
doTrans(currImg);
      
function doTrans()
{  
if (currImg==imgArray.length) currImg=0;
if(navigator.appName=='Mozilla Firefox')
{
var part=imgArray[currImg].split('$$$');
var srcimage=part[0];
var url=part[1];  
imagePhoto.filters[0].apply();
//document.images['imagePhoto'].src=imgArray[currImg];
document.images['imagePhoto'].src=srcimage;
document.images['imagePhoto'].alt=url;  
imagePhoto.filters[0].play();
        
}
else
{
var part=imgArray[currImg].split('$$$');
var srcimage=part[0];  
var alt=part[1];
document.images['imagePhoto'].src=srcimage;
document.images['imagePhoto'].alt=alt;
}  
currImg++;
}
      
function PartURL(url)
{      
var part=url.split('$$$');
return part[1];    
}
      
function GotoSite(url)
{      
window.location.href=url;
}
</script>
<script>
setInterval('doTrans()',5000);
</script>


Code3.2:
<script language="JavaScript">

var slidespeed=
3000
var slideimages=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.j pg","7.jpg","8.jpg","9.jpg")

var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
window.location=slidelinks[whichlink]
}

//-->
</script>

<a href="javascript:gotoshow()"><img width="160" src="1.jpg" name="slide" border=0
style="filter:progidXImageTransform.Microsoft.Pi xelate(MaxSquare=5,Duration=1)"></a>


<script language="JavaScript">
<!--
var whichlink=0
var whichimage=0
var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie55) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()

//-->
</script>

<!--
<marquee width="100%" height="150" direction=up scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<img border=0 width='150' src=1.jpg>
<br><br><img border=0 width='150' src=2.jpg>
<br><br><img border=0 width='150' src=3.jpg>
<br><br><img border=0 width='150' src=4.jpg>
<br><br><img border=0 width='150' src=5.jpg>
<br><br><img border=0 width='150' src=6.jpg>
<br><br><img border=0 width='150' src=7.jpg>
<br><br><img border=0 width='150' src=8.jpg>
<br><br><img border=0 width='150' src=9.jpg><br><br>
</marquee> --> có thể bỏ đoạn này
-->

</td></tr>
</table>
</td>
</tr>


Code3.3: đoạn code này và đoạn code 3.4 có link liên kết khi click vào ảnh tương ứng nha
<script language="JavaScript1.2">
function reapply(){
setTimeout("slideit()",2000)
return true
}
window.onerror=reapply
</script>
<script language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="1.jpg"
var image2=new Image()
image2.src="2.jpg"
var image3=new Image()
image3.src="3.jpg"
//-->
</script>

<body onLoad="slideit()">
<a href="javascript:slidelink()"
onMouseover="window.status='Slide anh !';return true"
onMouseout="window.status=''">

<p><img src="3.jpg" name="slide" border="0" style="filter:blendTrans(duration=3)"
width="80" height="80"></a> <script>
<!--

//Thay doi Tong so anh
var number_of_images=3
//Thay doi toc do (in seconds)
var speed=3
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.blendTrans.apply()
document.images.slide.src=eval("image"+step+".src" )
if (document.all)
slide.filters.blendTrans.play()
whichimage=step
if (step<number_of_images)
step++
else
step=1
if (document.all)
setTimeout("slideit()",speed*1000+3000)
else
setTimeout("slideit()",speed*1000)
}
function slidelink(){
if (whichimage==1)
window.location="link1"
else if (whichimage==2)
window.location="link2"
else if (whichimage==3)
window.location="link3"
}

</script>


Code3.4:
<script language="JavaScript1.1">

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

</script>
<a href="javascript:gotoshow()"><img src="1.jpg" name="slide" border=0 width=300 height=375></a>
<script>

slideshowimages("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg")
slideshowlinks("link 1","link 2","link3","link4","link5")

var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

</script>


Hoặc nếu bạn sử dụng dịch vụ thiết kế web của Dmon/ Ucoz thì bản thân 2 dịch vụ này cũng cung cấp cho bạn chèn slide ảnh sẵn có. Rất đơn giản và tiện lợi. Bạn có thể xem ở đây để chèn slide ảnh nha.

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


Category: Featured Post - Image Gallery | Views: 5613 | Added by: all4u | Rating: 1.5/2
Total comments: 6
6  
That's a knowing answer to a <a href="http://lyurcwlpthy.com">difclfuit</a> question

5  
This is an area of painting I have a great deal of truolbe with so thanks for putting out this video. I could use the revision as I know this is a topic I struggle with. I downloaded the jpg and did some practise last night. I enjoyed your rendering tutorial I brought from your store and my vase came out OK so I will definitely buy another tutorial. One area I would love to see covered is how to create good character sheets with front, side, and back views in Photoshop.

4  
Cảm ơn bạn, nếu muốn chạy nhiều ảnh thì chèn thế nào, hay chỉ giới hạn một số ảnh nhất định thôi.

3  
cảm ơn

2  
DDDD

1  
DSADADADADAD

Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page