Slideshow (Trình Chiếu) Ảnh Kiểu Lật Trang Sách

Slideshow chạy ảnh đẹp luôn là những điểm nhấn trên một Blogspot/Website. Slideshow đó bạn có thể trình bày những thông tin nổi bật như bài viết, quảng cáo, hình ảnh đẹp...một hiệu ứng Slideshow đẹp cũng góp phần làm tô điểm thêm cái đẹp và sức sống động của trang Web/Blog.
Blogspot của bạn sẽ chuyên nghiệp hơn nếu có một tiện ích trình chiếu ảnh để giới thiệu với bạn bè.
Dưới đây là chia sẻ về một Slideshow (trình chiếu) ảnh kiểu lật trang sách.

DEMO

• DEMO

Để tạo được slider chuyển ảnh kiểu lật trang sách như demo ở trên bạn chỉ cần thêm một tiện ích ở vị trí bạn muốn và dán code sau vào:
Code:

<script type=text/javascript>
 var Book_Image_Width=400; // Chiều rộng - Chiều rộng trang sách trong slider
 var Book_Image_Height=222;// Chiều cao - Chiều cao trang sách trong slider
 var Book_Border=false;
 var Book_Border_Color="#111";
 var Book_Speed=15;
 var Book_NextPage_Delay=1500;
 var Book_Vertical_Turn=0; 
 Book_Image_Sources=new Array(
  "Link ảnh 1","#",
  "Link ảnh 2","#",
  "Link ảnh 3","#",
  "Link ảnh 4","#"

  );
/***************** Phần code không được chỉnh sửa **********************************/
 var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
 var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);
 function ImageBook(){
  if(document.getElementById){
   for(i=0;i<Book_Image_Sources.length;i+=2){
    B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
   Book_Div=document.getElementById("Book");
   B_LI=document.createElement("img");Book_Div.appendChild(B_LI);    B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
   B_MI=document.createElement("img");Book_Div.appendChild(B_MI);    B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
   B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
   B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
   B_LI.style.left=0+"px";
   B_MI.style.top=0+"px";
   B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
   B_RI.style.top=0+"px";
   B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
   B_LI.style.height=Book_Image_Height+"px";
   B_MI.style.height=Book_Image_Height+"px";
   B_RI.style.height=Book_Image_Height+"px";
   B_LI.style.width=Book_Image_Width+"px";
   B_MI.style.width=Book_Image_Width+"px";
   B_RI.style.width=Book_Image_Width+"px";
   if(Book_Border){
    B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
    B_LI.style.borderWidth=1+"px";
    B_MI.style.borderWidth=1+"px";
    B_RI.style.borderWidth=1+"px";
    B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
   B_LI.src=B_Pre_Img[0].src;
   B_LI.lnk=Book_Image_Sources[1];
   B_MI.src=B_Pre_Img[2].src;
   B_MI.lnk=Book_Image_Sources[3];
   B_RI.src=B_Pre_Img[4].src;
   B_RI.lnk=Book_Image_Sources[5];
   B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
   B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
   B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
   BookImages()}}
 function BookImages(){
  if(!B_Stppd){
   if(Book_Vertical_Turn){
    B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
    MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
    B_MI.style.top=MidOffset+"px";
    B_MI.style.height=B_MSz+"px"}
   else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
    MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
    B_MI.style.left=MidOffset+"px";
    B_MI.style.width=B_MSz+"px"}
   B_Angle+=Book_Speed/720*Math.PI;
   if(B_Angle>=Math.PI/2&&B_Direction){
    B_Direction=0;
    if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
    B_MI.src=B_Pre_Img[B_CrImg].src;
    B_MI.lnk=Book_Image_Sources[B_CrImg+1];
    B_CrImg+=2}
   if(B_Angle>=Math.PI){
    B_Direction=1;
    B_TI=B_LI;
    B_LI=B_MI;
    B_MI=B_TI;
    if(Book_Vertical_Turn)B_MI.style.top=0+"px";
    else B_MI.style.left=Book_Image_Width+1+"px";       B_MI.src=B_RI.src;
    B_MI.lnk=B_RI.lnk;
    setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
   else setTimeout("BookImages()",50)}
  else setTimeout("BookImages()",50)}
 function Book_Next_Delay(){
   if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
   B_RI.src=B_Pre_Img[B_CrImg].src;
   B_RI.lnk=Book_Image_Sources[B_CrImg+1];
   B_MI.style.zIndex=2;
   B_LI.style.zIndex=1;
   B_Angle=0;
   B_CrImg+=2;
  setTimeout("BookImages()",50)}
 function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
 function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
 function B_Rstrt(){B_Stppd=false}
</script>

<style>
#Book{
width:800px;//Chiều rộng slider tương đương 2 trang sách(Book_Image_Width nhân đôi)
height:222px;
position:relative;
margin:auto;
}
</style>
<div id="Book">
<script>    ImageBook(); </script> </DIV>

Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:

• Hộp thử Test Html/JavaScript

Muốn thêm ảnh bạn chỉ cần thêm đoạn:

"Link ảnh 1","#",

Nguồn DautoBlognz.Blogspot.com

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..