Phần 27 - Làm phần slideshow trang chủ

- Tiếp theo là làm phần sildeshow trang chủ.Tại trang 'dieu_huong.php' thì bạn thay dòng code echo "trang chủ"; thành dòng code :

include("chuc_nang/slideshow/slideshow.php");

- Bạn tạo thư mục 'slideshow' trong thư mục 'hinh_anh' rồi sao chép các hình ảnh trong thư mục '3' của file đính kèm vào thư mục 'slideshow'

- Bạn tiến hành tạo thư mục 'slideshow' trong thư mục 'chuc_nang'.Bạn tạo file 'slideshow.php' trong thư mục 'slideshow' với nội dung sau :

<style type="text/css" >
    div.slideshow img {width:600px;height:260px}
</style>
<center>
<div class="slideshow" id="slideshow" >
    <a href="#"><img src="hinh_anh/slideshow/a_1.png" ></a>
    <a href="#"><img src="hinh_anh/slideshow/a_2.png" ></a>
    <a href="#"><img src="hinh_anh/slideshow/a_3.png" ></a>
    <a href="#"><img src="hinh_anh/slideshow/a_4.png" ></a>
</div>
</center>
<script type="text/javascript" >

    var i_img=0;
    var div_slideshow=document.getElementById("slideshow");
    var img_slideshow=div_slideshow.getElementsByTagName("img");
    for(var i=0;i<img_slideshow.length;i++)
    {
        img_slideshow[i].style.display="none";
    }
    img_slideshow[0].style.display="block";
  
    setInterval(function(){
        img_slideshow[i_img].style.display="none";
        i_img=i_img+1;
        if(i_img>=img_slideshow.length){i_img=0;}
        img_slideshow[i_img].style.display="block";      
    },5000);
</script>

- Bạn xem giải thích bên phải phần phía dưới :

<style type="text/css" >                                                                                                    // Khai báo định dạng css

    div.slideshow img {width:600px;height:260px}                                                              // định nghĩa chiều rộng , chiều cao của hình ảnh slideshow
                                                                                                                                        //  địa chỉ slideshow được chỉ định là thẻ div
                                                                                                                                        //  có class tên là 'slideshow'
</style>

<center>                                                                                                                           // canh giữa slideshow bằng thẻ 'center'
<div class="slideshow" id="slideshow" >                                                                            // tạo thẻ div chứa slideshow có id là 'slideshow'
                                                                                                                                         // id này sẽ được dùng trong mã javascript để tạo hiệu ứng
                                                                                                                                         // chuyển ảnh
 
    <a href="#"><img src="hinh_anh/slideshow/a_1.png" ></a>                                           // xuất các ảnh ra cùng với liên kết trong thuộc tính href
    <a href="#"><img src="hinh_anh/slideshow/a_2.png" ></a>                                           // thẻ 'a' sẽ bọc lấy thẻ 'img'
    <a href="#"><img src="hinh_anh/slideshow/a_3.png" ></a>
    <a href="#"><img src="hinh_anh/slideshow/a_4.png" ></a>
</div>
</center>
<script type="text/javascript" >                                                                                           // Khai báo dùng code javascript

    var i_img=0;                                                                                                                    // Khai báo biến i_img , biến này có tác dụng khai báo vị trí của                                                                                                                                                        // ảnh mỗi khi chuyển ảnh

    var div_slideshow=document.getElementById("slideshow");                                             // Truy cập tới slideshow thông qua div có id là 'slideshow'
                                                                                                                                           // Lệnh getElementById dùng để truy cập id  
    
    var img_slideshow=div_slideshow.getElementsByTagName("img");                                  //  Truy cập vào hình ảnh trong slideshow
                                                                                                                                           // thong qua lệnh getElementsByTagName 
                                                                                                                                           // dấu ngoặc đơn dùng để điền tên thẻ (ở đây là thẻ img )
 
  for(var i=0;i<img_slideshow.length;i++)                                                                              // cho vòng lặp 'for' chạy qua các hình ảnh 
    {
        img_slideshow[i].style.display="none";                                                                          // không hiển thị hình ảnh thông qua lệnh style.display="none"; 
    }
    img_slideshow[0].style.display="block";                                                                            // hiển thị hình ảnh đầu tiên (đặt thành giá trị block )
  
    setInterval(function(){                                                                                                        // chạy hiệu ứng hình bằng lệnh setInterval
                                                                                                                                             // lệnh này nghĩa là cứ sau 1 khoảng thời gian
                                                                                                                                             // thì thực hiện 1 đoạn mã gì đó
                                                                                                                                             // ở đây là 5 giây (để ý số 5000 ở phía dưới)  
      
        img_slideshow[i_img].style.display="none";                                                                    // không hiển thị hình ảnh hiện tại
                                                                                                                                             // biến i_img sẽ có giá trị là vị trí của hình ảnh hiện tại
      
        i_img=i_img+1;                                                                                                             // tăng vị trí hình ảnh lên 1 (nghĩa là đến hình kế tiếp)      
        if(i_img>=img_slideshow.length){i_img=0;}                                                                   // nếu đã tăng vị trí ảnh đến vị trí cuối cùng thì 
                                                                                                                                             // vị trí ảnh sẽ trở về vị trí ban đầu (nghĩa là trở về 0)
      
        img_slideshow[i_img].style.display="block";                                                                   // hiển thị hình ảnh kế tiếp ra (đặt thành giá trị block )
                                                                                                                                             // ( biến i_img đã tăng 1 giá trị hoặc trở về 0 ) 
    },5000);
</script>

- Khi vào lại trang chủ , mình nhận được kết quả là slideshow chuyển ảnh qua lại các hình 'a_1.png','a_2.png','a_3.png','a_4.png'

- Như vậy là làm xong slideshow bằng mã html,js,css (chưa dùng code php để tải dữ liệu từ mysql vào)

- Kết thúc phần này , code file 'dieu_huong.php' như sau :

<?php
    if(isset($_GET['thamso'])){$tham_so=$_GET['thamso'];}else{$tham_so="";}
    switch($tham_so)
    {
        case "xuat_san_pham":
            include("chuc_nang/san_pham/xuat.php");
        break;
        case "chi_tiet_san_pham":
            include("chuc_nang/san_pham/chi_tiet_san_pham.php");
        break;
        case "xuat_san_pham_2":
            include("chuc_nang/san_pham/xuat_toan_bo_san_pham.php");
        break;
        case "xuat_mot_tin":
            include("chuc_nang/xuat_mot_tin.php");
        break;
        case "tim_kiem":
            include("chuc_nang/tim_kiem/xuat_san_pham_tim_kiem.php");
        break;
        case "gio_hang":
            include("chuc_nang/gio_hang/gio_hang.php");
        break;
        default:
            include("chuc_nang/slideshow/slideshow.php");          
    }
?>